我在Dreamweaver中创建了一个变换图像菜单。一周的日子是图像。悬停时出现的翻转图像也是如此。我的问题是当你将鼠标悬停在一周中的几天时,悬停图像会将文本按下来。
我一起嘲笑两个屏幕抓取显示菜单在悬停之前和期间(http://static.tumblr.com/2wdsnoc/FbPmx6mez/hover-example.png)
我读到了z-indexes并试图使菜单的数量大于悬停,但是没有用,也没有帮助确定位置。最后,这是我设置菜单的唯一CSS -
== CSS ==
#nav {
text-align:center;
list-style: none;
}
#nav ul
{
list-style-type:none;
}
#nav li
{
display:inline;
text-decoration:none;
}
Here is the JSfiddle with the full javascript, html and css我只是轻松地展示了一个类别。 提前谢谢!!
答案 0 :(得分:0)
使用Javacript
对于您要完成的工作来说是过度的,只需使用精灵图片,然后通过CSS
管理其余部分
<强> JSFiddle Demo 强>
<强> HTML:强>
<ul>
<li class="home"><a href="#">Home</a></li>
</ul>
<强> CSS 强>
ul { float:left}
ul li { float:left; list-style:none; }
ul a { display:block; text-indent:-9999em; }
ul li.home { width:100px; height:50px; }
ul li.home a { background:url(http://placehold.it/100x100) no-repeat 0 0 }
ul li.home a:hover { background-position:0 -50px; }
答案 1 :(得分:0)
试试这个http://jsfiddle.net/r2FF7/18/
#nav li a img{
vertical-align:bottom;
}