Question

我正在制作一个下拉菜单，并且已经进入了一个麻烦的地方，让悬停效果按我预期的方式工作。当我将鼠标悬停在图像上时，我希望下拉动作发生，这样可以正常工作。但我还希望图像下方的文字像连接文本和下拉菜单的标签一样。

我已经将这个jsfiddle示例放在一起给出一个粗略的想法。所以当我将鼠标悬停在按钮上时，“HOVER”文本的背景应该变为绿色。但是当我将鼠标悬停在文本上方时，它只会变为绿色，我希望当我将鼠标悬停在实际按钮上时，它会运行悬停效果。我希望这有道理吗？

继承人html：

<div class="menu">
<ul>
    <li><div class="btn"><p>HOVER</p></div>
        <ul>
            <li><a href="#">Menu Item</a></li>
            <li><a href="#">Menu Item</a></li>
        </ul>
    </li>
</ul>

CSS：

.btn{
    display: block;
    width: 68px;
    height: 22px;
    padding-top: 70px;
    font-weight: bold;
    float: left;
    padding-right:30px;
    text-align:center;
}

.btn{
    background: url("http://www.aidancotter.com/images/face.png") no-repeat -5px 0px;
}

.btn:hover{
    background-position: -5px -120px;
}

.menu ul li{
    list-style:none;
}

.menu{
    display: inline;
    float: left;
    padding-right:30px;
    padding:20px 0 0 20px;
}

a{
    text-decoration:none;
    color:#000;
}

.btn p{
    font-family:Arial;
    padding:10px;
    color:#000;
    padding:5px;
    border-radius:5px;
}

.btn p:hover{
    background:#78a802;
    cursor:pointer;
    color:#fff;
}

.menu ul li ul{
    display:none;
    background:#78a802;
    position:absolute;
    width:200px;
    color:#fff;
    margin-top:95px;
}

.menu ul li:hover ul{
    display:block;
    padding:15px;
    line-height:30px;
}

.menu ul li a:hover{
    color:#fff;
}

非常感谢任何帮助！

Answer 1

添加此

li:hover div{  background-position: -5px -120px; color:green}

<强> DEMO

对于文本BG颜色，您需要在文本周围添加另一个标记

li:hover span{  background-color:#78a802; color:green; display:block} 
li:hover div{  background-position: -5px -120px; color:green}

<强> DEMO 2 UPDATED

Answer 2

在CSS中添加以下属性：

.btn:hover p {
    background-color: #78a802;
}

更新了Fiddle link。

下拉菜单悬停状态

2 个答案: