将CSS悬停在列表项上似乎正在影响ul内的所有列表项目

我的菜单项存在问题。我有我的菜单项的样式，所以每当我将鼠标悬停在列表项上时，它都会使悬停的项目变暗。
但是，每当我将鼠标悬停在一个列表项目上时，它似乎会影响和调暗所有列表项目。将CSS悬停在列表项上似乎正在影响ul内的所有列表项目

我缩小了这个问题。当我的menu-bar-container div相对定位时，它工作得很好。但是，我想这个菜单栏容器div被修复。

任何人都知道似乎是什么问题？提前感谢帮助。

下面是HTML：

<div id="menu-bar-container"> 

    <h1> GENE WONG OFFICIAL PAGE </h1> 

    <div class="clear"> </div> 

     <div id="menu-bar-2"> 
      <ul> 
       <li class="fade"><a href="index.html">HOME</a></li> 
       <li class="fade"><a href="index.html">NEWS</a></li> 
       <li class="fade"><a href="bio.html">BIOGRAPHY</a></li> 
       <li class="fade"><a href="index.html">MEDIA</a></li> 
       <li class="fade"><a href="index.html">PROJECTS</a></li> 
       <li class="fade active"><a href="gear.html">GEAR</a></li> 
       <li class="fade"><a href="index.html">CONTACT</a></li> 
      </ul> 
     </div> 
    </div>

和这里的CSS：

#menu-bar-container { 
    background: url(images/hp/header-bg.png); 
    min-width: 100%; 
    height: 110px; 
    margin: 0 auto; 
    text-align: center; 
    border-bottom: 1px solid #2F2F2F; 
    position: fixed; 
    z-index: 10; 
} 

#menu-bar-2 { 
    display: inline-block; 
    margin: 0 auto; 
    height: 32px; 
    max-width: 100%; 
} 

#menu-bar-2 ul { 
    list-style-type: none; 
    overflow: auto; 
    margin: 0; 
    padding: 0; 
    padding-top: 4px; 
    height: 30px; 
} 

#menu-bar-2 li { 
    float:left; 
} 

#menu-bar-2 li a { 
    display: block; 
    text-decoration: none; 
    padding: 0px 10px; 
    font-size: 15px; 
    top: 10px; 
    color: white; 
} 

#menu-bar-2 li.active a { 
    color:#E20000; 
} 


.fade { 
    opacity: 1; 
    transition: opacity .25s ease-in-out; 
    -moz-transition: opacity .25s ease-in-out; 
    -webkit-transition: opacity .25s ease-in-out; 
} 

.fade:hover { 
    opacity: .7; 
}

来源

2016-08-13 rasalghoul

您提供的CSS实际上并未显示任何'：hover'状态，但是您的问题表明'：hover'效果未按预期运行。你能否提供澄清？ –

我的歉意，我添加了淡入淡出类和悬停属性。我想在悬停在列表项上时发生的事情是让该特定列表项在不透明状态下变暗。但是，当我将鼠标悬停在任何列表项目上时，所有列表项都将变暗（无动画），然后快速返回到常规不透明状态。在我看来，所有列表项目都受到影响，而不仅仅是悬停的项目。 – rasalghoul

似乎按预期工作：https://jsfiddle.net/NotInUse/t00h7kac/我不确定你指的是什么。 – Scott

改变你的＃菜单栏容器高度112px，并删除 “高度：30PX” 从＃菜单栏2 ul，然后你应该没有问题！

来源

2016-08-14 06:43:01 kiarashws

将CSS悬停在列表项上似乎正在影响ul内的所有列表项目

回答

相关问题