Home >Web Front-end >HTML Tutorial >100分!关于链接的问题!_html/css_WEB-ITnose
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(){ //鼠标移出运行代码});