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

Posted 2023-03-06

【中文标题】使用奇怪的导航栏的 CSS 悬停问题

【英文标题】：CSS hover issue using an odd navigation bar

【发布时间】：2011-12-01 16:36:17

【问题描述】：

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

【参考方案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 上显示的函数。

【讨论】：

非常感谢您的回复。我实际上并没有选择走这条路，但在我看来，我以某种方式认为我可以完全通过 CSS 让它工作。我想得越多，即使有办法让它工作，我相信你使用 JQuery 的方式会更干净。我现在就试试这个。再次感谢您的帮助！