首頁 > web前端 > html教學 > 100分!关于链接的问题!_html/css_WEB-ITnose

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

WBOY
發布: 2016-06-21 09:03:26
原創
1045 人瀏覽過

旭讯时空
首页
下载
关于

我想在鼠标移到下载那个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事件

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板