我正在制作一个网站上的自定义导航栏,但我遇到了问题。我四处搜索并发现了一些类似的线程,但没有任何对我有用的线程。我有一个带有图像和下面一些文本的导航栏。我想要完成的是将鼠标悬停在文本或图像上时,两者都会出现悬停效果。问题是对于图像,悬停效果是通过 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;
}
为了清楚起见,我只是想让两者都变成相同的红色。任何建议将不胜感激。
最佳答案
这能满足您的需求吗? 将两个 div(#navbar 和 .navtext)放在包装器 div 中,然后将悬停样式放在这些选择器中:
#wrapper:hover #homenav
和
#wrapper:hover .navtex
参见 fiddle here .
但是悬停样式用于悬停在整个包装器 div 上。
关于html - 悬停对 class 和 id 的影响是否相互关联?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31297316/