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”类（带照片的照片）的div并显示它。当鼠标离开时，隐藏'aboutPicture'div。我只编写了两个不同的li，但你可以用它作为基础。

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

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

1 个答案: