在悬停时更改整个<li>颜色，而不仅仅是href

Change whole <li> color on hover, not just href

本文关键字：li 颜色 href 不仅仅是 悬停      更新时间：2023-09-26

我需要在悬停时更改li的整个背景颜色。我已经查看了Google和Stackoverflow上的其他示例，但我认为我的代码中可能存在冲突。

js小提琴

.HTML：

<div id="nav_bar">
       <div id="nav_bar_inside">
            <div class="nav_bar_content">
                <ul>
                    <li><a>Home</a></li>
                    <li><a>Music</a></li>
                    <li><a>Pictures</a></li>
                    <li><a>Links</a></li>
                    <li><a>Biography</a></li>
                </ul>
            </div>
        </div>
    </div>

.CSS：

    .nav_bar {
        -webkit-animation:leftBar 1s; /* Safari and Chrome */
        -webkit-animation-fill-mode: forwards;
        float: left;
        background: #666;
        position:fixed;
        z-index: 15;
        box-shadow: 0px 0px 10px 1px rgba(119, 119, 119, 0.75);
        -moz-box-shadow: 0px 0px 10px 1px rgba(119, 119, 119, 0.75);
        -webkit-box-shadow: 0px 0px 10px 1px rgba(119, 119, 119, 0.75);
}    
#nav_bar #nav_bar_inside li {
    list-style-type: none;
    border-bottom: 1px solid #000;
    height: 50px;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 22px;
    text-transform: uppercase;
    text-align: center;
    vertical-align: middle;
    padding-top: 30px;
}
#nav_bar #nav_bar)inside a {display: inline-block;}
#nav_bar #nav_bar_inside li a:hover {
    background-color: rgba(255, 0, 0, 0.4);
    display: block;
    cursor: pointer;
}

这一行： 

#nav_bar #nav_bar_inside li a:hover

应该是：

#nav_bar #nav_bar_inside li:hover

这种方法还有一个额外的好处，可以使整个 LI 可点击：

li {padding: 0;}
li a {display: block;}

感谢佳能的小提琴。这里整理一下：

http://jsfiddle.net/antisanity/35gNz/4

：将鼠标悬停在整个 li 上 - 这是您的模组：

http://jsfiddle.net/hmfuL/

#nav_bar #nav_bar_inside li:hover {
background-color: rgba(255, 0, 0, 0.4);
display: block;
cursor: pointer;
}
相关文章：