Heim >Web-Frontend >HTML-Tutorial >100分！关于链接的问题！_html/css_WEB-ITnose
100分！关于链接的问题！_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 09:03:261031Durchsuche
- 首页
- 下载
- 关于
我想在鼠标移到下载那个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事件
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：如何写出带有滚动条的弹出框？html_html/css_WEB-ITnoseNächster Artikel：html 编码规范_html/css_WEB-ITnose