100分！关于链接的问题！_html/css_WEB-ITnose-HTML 튜토리얼-php.cn

100分！关于链接的问题！_html/css_WEB-ITnose

WBOY

풀어 주다： 2016-06-21 09:03:26

원래의

1033명이 탐색했습니다.

旭讯时空

首页

下载

关于

我想在鼠标移到下载那个DD标签上让背景颜色变成蓝色为什么实现不了？

回复讨论(解决方案)

a:hover dd {
background:#00F;
color:#FFF;
}

实现方法有很多种，不过你的HTML代码嵌套本身应该有悖HTML语义。

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>旭讯时空</title><style>*{margin:0px;padding:0px;font-family:"黑体";font-size:30px;}body{background-image: url(Pictures/back.jpg);background-repeat: repeat;}#banner{width:100%;height:100px;background-color:#333;position:absolute;top:100px;text-align:center;}#banner_options{width:1000px;height:100px;margin:0px auto;}dl{color:#00F;line-height:100px;}dd{float:left;width:333px;height:100px;}a{text-decoration:none;color:#00F;}a:hover{background:#00F;color:#FFF; display:block;}</style></head><body><!--导航条，占据整个浏览器的宽--><div id="banner">	<div id="banner_options">    <dl>    	<dd>首页</dd>                <dd><a href="#">下载</a></dd>                <dd>关于</dd>    </dl></div></div>我想在鼠标移到下载那个DD标签上让背景颜色变成蓝色为什么实现不了？</body></html>

로그인 후 복사

// 不知道你要变哪个背景，下面是一个。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>MyHtml.html</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">  </head></head><body><style>* {	margin: 0px;	padding: 0px;	font-family: "黑体";	font-size: 30px;}body {	background-image: url(Pictures/back.jpg);	background-repeat: repeat;}#banner {	width: 100%;	height: 100px;	background-color: #333;	position: absolute;	top: 100px;	text-align: center;}#banner_options {	width: 1000px;	height: 100px;	margin: 0px auto;}dl {	color: #00F;	line-height: 100px;}dd {	float: left;	width: 333px;	height: 100px;}a {	text-decoration: none;	color: #00F;}a:hover {	background: #00F;	color: #FFF;}</style>	<!--导航条，占据整个浏览器的宽-->	<div id="banner">		<div id="banner_options">			<dl>				<dd>首页</dd>				<dd><a href="#">下载</a></dd>				<dd>关于</dd>			</dl>		</div>	</div><script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>    <script>	$(function() {		$('#banner_options dl dd a').hover(function () {			$('#banner').css('background','#00f');		}, function () {			$('#banner').css('background','#eee');		})	});  </script> </body> </html>

로그인 후 복사

看你想用css还是js了，css就用一楼的写法，js的话，我建议用jquery框架写，因为方便些，只要这么写就好

$("a").hover(  function(){      //鼠标移入运行代码  },function(){     //鼠标移出运行代码})；

로그인 후 복사

如果用原生js还得再a标签上去写onmouseover和onmouseout事件