Question

我在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我只是轻松地展示了一个类别。提前谢谢!!

Answer 1

使用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; }

Answer 2

试试这个http://jsfiddle.net/r2FF7/18/

#nav li a img{
    vertical-align:bottom;
}

整页：http://jsfiddle.net/r2FF7/18/show/

菜单在悬停时移动

2 个答案: