Question

我有一个固定位置的导航，里面有一个列表，我希望在悬停时改变颜色。但由于导航的固定位置，这不起作用。有办法解决这个问题吗？

这是我的例子

.nav {
    position: fixed;
    width: 100%;
    height: 80px;
    background-color: #ffffff;
    box-shadow: 0px -2px 5px 1px;
}

.nav-inner {
    position: relative;
    width: 100%;
    max-width: 1500px;
    height: 80px;
    margin-left: 50%;
    transform: translate(-50%);
}

.nav-right {
    float: right;
    height: 100%;
}

.nav-menu {
    position: relative;
    top: 50%; 
    margin: -30px 130px 0px 0px;
    height: 60px;
}


.nav-menu li {
    list-style: none;
    display: inline-block;
    font-family: 'Open Sans', sans-serif;
    font-size: 10pt;
    padding: 20px;
}

.nav-menu li:last-child {margin: 0}

.nav-menu li:hover { cursor: pointer;}

.nav-left {
    float: left;
    color: #02c576;
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    font-size: 15pt;
    letter-spacing: 4px;
    height: 100%;
}

.logo {
    position: relative;
    height: 24px;
    top: 50%;
    margin: -12px 0px 0px 130px;
}

.nav-button {
    display: none;
}

<div class="nav">
           <div class="nav-inner">
               <div class="nav-left">
                   <div class="logo">
                        <p>Company Name</p>
                   </div>
               </div>
               <div class="nav-right">
                   <div class="nav-menu">
                        <ol>
                            <li data-menu="Link1">Link1</li>
                            <li data-menu="Link2">Link2</li>
                            <li data-menu="Link3">Link3</li>
                            <li data-menu="Link4">Link3</li>
                        </ol>
                   </div>
               </div>
               <div class="nav-button">
                   <img src="Images/menu.png">
               </div>
           </div>
       </div>

提前致谢！

Answer 1

目前无法单独使用CSS来选择孩子的父母。我能想到的最好的方法，或者至少最简单的方法需要一点JS。

简单地向列表项添加数据属性，并在悬停时将JS事件作为类传递给固定导航。那个班级会控制颜色。

自己动手，如果你努力发布一些代码，我们就可以修复它。

Answer 2

嗯，你的代码对我来说很好 js fiddle linke 我看到了您的代码，如果您不想使用<a>代码，则必须添加

.nav-menu li:hover{
color:#fff;
}

简单的代码

nav { width: 100px; height: 80px; position: fixed; } 
nav li { display: inline-block; } 
nav li:hover { color: white; }

<nav>
<ul>
  <li>dhh</li>
  <li>fs</li>
  <li>ss</li>

</ul>
</nav>

Answer 3

使用您的代码似乎对我工作正常（我所做的只是将<a>标记放在<li>元素中，因为这是您的代码所针对的。）

.nav {
    position: fixed;
    width: 100%;
    height: 80px;
    background-color: #ffffff;
    box-shadow: 0px -2px 5px 1px;
}

.nav-inner {
    position: relative;
    width: 100%;
    max-width: 1500px;
    height: 80px;
    margin-left: 50%;
    transform: translate(-50%);
}

.nav-right {
    float: right;
    height: 100%;
}

.nav-menu {
    position: relative;
    top: 50%; 
    margin: -30px 130px 0px 0px;
    height: 60px;
}


.nav-menu li {
    list-style: none;
    display: inline-block;
    font-family: 'Open Sans', sans-serif;
    font-size: 10pt;
    padding: 20px;
}

.nav-menu li:last-child {margin: 0}

.nav-menu li a:hover { 
    cursor: pointer;
    color: red;
}

.nav-left {
    float: left;
    color: #02c576;
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    font-size: 15pt;
    letter-spacing: 4px;
    height: 100%;
}

.logo {
    position: relative;
    height: 24px;
    top: 50%;
    margin: -12px 0px 0px 130px;
}

.nav-button {
    display: none;
}

<div class="nav">
           <div class="nav-inner">
               <div class="nav-left">
                   <div class="logo">
                        <p>Company Name</p>
                   </div>
               </div>
               <div class="nav-right">
                   <div class="nav-menu">
                        <ol>
                            <li data-menu="Link1"> <a href=#>Link1</a> </li>
                            <li data-menu="Link2"><a href=#>Link2</a></li>
                            <li data-menu="Link3"><a href=#>Link3</a></li>
                            <li data-menu="Link4"><a href=#>Link4</a></li>
                        </ol>
                   </div>
               </div>
               <div class="nav-button">
                   <img src="Images/menu.png">
               </div>
           </div>
       </div>

Answer 4

在尝试并尝试之后我在.nav css中添加了一个z-index，它终于有效了！我没有明确说明它为何起作用，但它对我有用。

Answer 5

我尝试过的最简单的方法是将填充元素放置在第一个元素内，然后将目标样式悬停在该内部元素上。

固定位置悬停

5 个答案: