使用奇怪的导航栏的 CSS 悬停问题

Question

我一直有一个问题困扰着我。我知道我这样做的方式很奇怪，并且可能会导致问题，但我想仅使用 CSS 来尝试。我现在已经很接近了，但有一个问题，希望在我放弃之前有人能有一个想法。

基本上我有一个导航栏，可以在悬停时更改图像。与此不同的是，我希望两个图像在悬停时发生变化。因此，我决定也许可以通过将两张图像放入一张更大的图像中并将图像溢出到悬停链接之外来实现此目的。

现在，它在某种程度上可以工作，但是您可以从左到右越过链接，并且它可以很好地显示悬停，但如果您从右到左执行，则不起作用。

这是测试的链接 http://www.pclwebdesign.co.uk/fruit

我在考虑之后尝试过 z 索引来将链接放在前面，但这显然行不通，因为跨度在其中。

CSS

body{
    background:#FFF;
    }

#wrap{
    margin:0 auto;
    width:894px;
    height:900px;
    background:url(../images/background.jpg) no-repeat;
    }

#header{
    position:relative;
    margin:0 auto;
    width:625px;
    height:92px;
    }

#navbar{
    position:relative;
    display:block;
    margin-left:114px;
    width:626px;
    height:170px;
    background:url(../images/navbar2.jpg)
}

ul.cssmenu {    
list-style: none; padding-left: 24px; margin-top:-12px;     
}
.displace {    
position: absolute;    left: -5000px;     
}
ul.cssmenu li {    
float: left;    
}
ul.cssmenu li a {    
display: block; height: 170px;    
}

/**    Normal Links*/
ul.cssmenu li.about a {  
margin-right:10px; width:86px; height:59px;}
ul.cssmenu li.gallery a { width:120px; height:59px;}
ul.cssmenu li.home a {  width:150px; height:59px;}
ul.cssmenu li.contact a {  width:120px; height:59px;}
ul.cssmenu li.video a {  width:97px; height:59px;}

/**    Hidden LED Navbar images*/
ul.cssmenu li.about a .led {
    display: none; width:626px; height:170px; margin-left:-24px;}
ul.cssmenu li.gallery a .led {
    display: none; width:626px; height:170px; margin-left:-120px;}
ul.cssmenu li.home a .led {
    display: none; width:626px; height:170px; margin-left:-240px;}
ul.cssmenu li.contact a .led {
    display: none; width:626px; height:170px; margin-left:-390px;}
ul.cssmenu li.video a .led {
    display: none; width:626px; height:170px; margin-left:-510px; }


/**    Hover Links*/
ul.cssmenu li.about a:hover .led {
    display: block; width:626px; height:170px; margin-left:-24px; background:url(../images/navbar2.jpg); background-position: 0px -170px;    
    }
ul.cssmenu li.gallery a:hover .led {
    display: block; width:626px; height:170px; margin-left:-120px; background:url(../images/navbar2.jpg); background-position: 0px -340px;    
    }
ul.cssmenu li.home a:hover .led {
    display: block; width:626px; height:170px; margin-left:-240px; background:url(../images/navbar2.jpg); background-position: 0px -510px;    
    }
ul.cssmenu li.contact a:hover .led {
    display: block; width:626px; height:170px; margin-left:-390px; background:url(../images/navbar2.jpg); background-position: 0px -680px;    
    }
ul.cssmenu li.video a:hover .led {
    display: block; width:626px; height:170px; margin-left:-510px; background:url(../images/navbar2.jpg); background-position: 0px -850px;    
    }

/** Navigation bar finish */

HTML

<div id="wrap">
    <div id="header">
    </div>

    <div id="navbar">
      <ul class="cssmenu">
        <li class="about"><a href="about.htm" title="About"><span class="led"></span></a></li>

        <li class="gallery"><a href="gallery.htm" title="Gallery"><span class="led"></span></a></li>

        <li class="home"><a href="home.htm" title="Home"><span class="led"></span></a></li>

        <li class="contact"><a href="contact.htm" title="Contact"><span class="led"></span></a></li>

        <li class="video"><a href="video.htm" title="Video"><span class="led"></span></a></li>

      </ul>
    </div>


</div>

Answer 1

您是否尝试过寻找替代方法？我认为这将是使用一些非常简单的 jQuery 的绝佳机会。我在 jsfiddle http://jsfiddle.net/Ee37A/4/ 上快速草拟了代码给你看。显然，您需要设置 div 的样式并用图像替换文本，但我认为这将是实现您正在寻找的内容的更简洁的方法。

本质上，当您将鼠标悬停在类为“.about”（导航按钮）的 div 上时，jQuery 会找到类为“aboutPicture”（led 照片）的 div 并显示它。当鼠标离开时，“aboutPicture”div 将被隐藏。我只编写了两个不同的li，但是你可以以此为基础。

您可以在此处找到有关 jQuery 的更多信息并下载源代码：http://jQuery.com。您需要创建一个外部 .js 文件来包含 jsfiddle.net 上显示的函数。