html - 悬停对 class 和 id 的影响是否相互关联？

Question

我正在制作一个网站上的自定义导航栏，但我遇到了问题。我四处搜索并发现了一些类似的线程，但没有任何对我有用的线程。我有一个带有图像和下面一些文本的导航栏。我想要完成的是将鼠标悬停在文本或图像上时，两者都会出现悬停效果。问题是对于图像，悬停效果是通过 ID 完成的，文本悬停效果是通过类完成的。这是我对其中一组的标记。

<div class="col-md-2 col-sm-1">
    <a href="@Url.Action("Index","Home")" title="HOME" style="margin-left:10px;">
        <div id="homenav"></div>
        <div class="navtext">HOME</div>
    </a>
</div>

这是图像的 CSS:

#homenav {
  margin: 0 auto; 
  display: block;
  width: 47px;
  height: 50px;
  background: url('../Images/NAV_ICONS/NAV_HOME.png') no-repeat 0 0;
}

#homenav:hover {
  background: url('../Images/NAV_ICONS/NAV_HOME_RED.png') no-repeat 0 0;
}

以及文本的 CSS:

.navtext{
  font-family: RobotoCondensed-Bold, 'Arial Narrow', Arial, sans-serif;
  color: #00457c;
  overflow: hidden;
  white-space: nowrap;
}

.navtext:hover{
    color: #ee2e24;
}

为了清楚起见，我只是想让两者都变成相同的红色。任何建议将不胜感激。

Answer 1

这能满足您的需求吗？将两个 div(#navbar 和 .navtext)放在包装器 div 中，然后将悬停样式放在这些选择器中:

#wrapper:hover #homenav

和

#wrapper:hover .navtex

参见 fiddle here .

但是悬停样式用于悬停在整个包装器 div 上。