日期:2014-05-17  浏览次数:20568 次

这个效果不能直接用在<a>标签里?
<html>
<head>
<style   type= "text/css ">
<!--
#c   {
background:url(2.gif)   no-repeat   top   left;
text-align:center;

width:   135px;
height:   25px;
padding-bottom:   0px;
margin-left:   355px;
}
#c   a:hover   {background:url(2.gif)   no-repeat   bottom   left;
text-align:center;

width:   135px;
height:   25px;
padding-bottom:   0px;

}
-->
</style>
<title> test   cover
</title>
</head>
<body>
<p   id= "c ">
<a   href= "# "> hello </a>
</p>
</body>
</html>

=========
2.gif是一个长135px,宽50px的图像
他是这样形式的
|----红---------|
------蓝---------
|----------------|
我想实现的是,当把鼠标放在这链接上时,通过
background:url(2.gif)   no-repeat   bottom   left;
就使用蓝色的背景.

但我怎么
上面这些样式要放在
<p> 标签里才行呢,

我直接
<a   href= "# "   id= "c "> hello </a>
这样他的背景为什么不会变呢?


------解决方案--------------------
<html>
<head>
<style type= "text/css ">
<!--
a{
width:135px;
background:url(images/abg.gif) no-repeat;
display:block;
text-align:center;
line-height:25px;
}
a:hover{
background-position:0 -25px;
}
-->
</style>
<title> test cover
</title>
</head>
<body>
<p>
<a href= "# "> hello </a>
</p>
</body>
</html>
------解决方案--------------------
#c a:hover {}
改成
#c:hover {}
------解决方案--------------------
#c a:hover {}

楼主明白这是什么意思么?

------解决方案--------------------
x:hover 是鼠标移到x元素上的样式
a:hover 是鼠标移到链接上的样式
#c:hover 是鼠标移到 id 为 c 的元素上的样式
同理 .c:hover 就是鼠标移到 class 为 c 的元素上的样式