1

我遇到了一些问题。我知道我这样做的方式很奇怪，并且可能会导致问题，但我想仅使用 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>
4

1 回答 1

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 上显示的函数。

于 2011-10-05T18:51:51.143 回答