css中a:hover更换背景图片的问题

pcuser 2013-10-11 11:06:28
本来菜单鼠标经过更换背景图片都是 onmouseover 和 onmouseout 控制
也很久没写过东西了,这天要做个网站,看到都是用 div+css的,多年前我可都用Table排版的亚。
看到一个案例,鼠标经过更换背景图片的案例,感觉不错,试了一下,发现貌似有点弊端,发上来请教一下大家,看看什么问题。


.menu_btn
{
display:block;
width:150px;
height:60px;
background:url("images/menu.png");/* menu.png 以及下面的 menuX.png 都是 150*60的 */
}
.menu_btn:hover
{
background-position: 0 -60px;
}



<ul>
<li>
<a class="menu_btn" style="background:url('images/menu1.png')" href="#">1</a>
</li>
<li>
<a class="menu_btn" style="background:url('images/menu2.png')" href="#">2</a>
</li>
<li>
<a class="menu_btn" style="background:url('images/menu3.png')" href="#">3</a>
</li>
<li>
<a href="#" class="menu_btn">4</a>
</li>
</ul>


程序中1、2、3当鼠标经过都不能变化背景,4可以正常变化背景。
求解答为什么会这样,有什么好的方法可以实现都可以正常变化背景的。
注: .menu_btn 中本来是没有 background:url("images/menu.png"); 发现不行,为了调试,才在加入 4 的时候加进这一句的。
...全文
6669 6 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
乌哩码嗏 2013-10-12
  • 打赏
  • 举报
回复
引用 4 楼 zqaq_520 的回复:
样式优先级问题啊~a标签style优先级高于.menu_btn:hover的定义,因此会覆盖掉
建议楼主试试,不要将图片定义为背景,而是作为img图片, 然后定义一个“oriPic”的img图片样式<img class="oriPic" src=""> 以及一个“covPic”的img图片样式<img class="covPic" src=""> 再来定义.menu_btn:hover .oriPic的 display: none; .menu_btn:hover .covPic的 display:block; 外加position来定义图片位置 仅做参考,未试过!
乌哩码嗏 2013-10-12
  • 打赏
  • 举报
回复
样式优先级问题啊~a标签style优先级高于.menu_btn:hover的定义,因此会覆盖掉
_MyPrecious 2013-10-12
  • 打赏
  • 举报
回复
123 不是 有style背景吗,去了不就有了吗
pcuser 2013-10-12
  • 打赏
  • 举报
回复
回复楼上,图片没有问题,同一个图片试过的了。 另,是 hover 的时候没有变化背景。
萧萧可乐 2013-10-12
  • 打赏
  • 举报
回复

.menu_btn
{
    display:block;
    width:150px;
    height:60px;
    background:url("images/menu.png");/* menu.png 以及下面的 menuX.png 都是 150*60的 */
    background-position: 0 0; /* 这个加上试试  一般不加也可以吧 */
}
.menu_btn:hover
{
    background-position: 0 -60px;
}
还有 看看是不是你的图片有问题。。。
easesu 2013-10-12
  • 打赏
  • 举报
回复
如4楼所说,样式优先级问题,background是简写形式,包含背景设置的所有信息,如本例本只想修改图片,却把其他的设置也覆盖掉了,可以将内联样式里的background属性换成background-image,这样只修改背景图片,而不修改其他设置。

61,129

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧