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

When using css :hover, the property changes will only affect the element being hovered. You would have to use Javascript/JQuery to do this, but it's pretty straightforward.

First, we need to change the :hover css elements into classes like so

.navtextHover{
    color: #ee2e24 !important;
}
.homeNavHover {
    background: url('http://lorempixel.com/g/400/200/') no-repeat 0 0 !important;
}

We also need to add a new class. This class will essentially mean that they are all tied together when hovered - ie, when one is hovered, all will be treated as hovered. So add that to the HTML (I called it syncedHover)

<div class="col-md-2 col-sm-1">
    <a href="#" title="HOME" style="margin-left:10px;">
        <div id="homenav" class="syncedHover"></div>
        <div class="navtext syncedHover">HOME</div>
    </a>
</div>

Then the javascript merely adds the classes on hover and removes them on exit

$(".syncedHover").hover(
    function () {
        $("#homenav").addClass("homeNavHover");
        $(".navtext").addClass("navtextHover");
    },
    function () {
        $("#homenav").removeClass("homeNavHover");
        $(".navtext").removeClass("navtextHover");
    }
);

This could be written better by passing data to the JQuery method on hover so you don't have a list of addClass methods, but this isn't too cumbersome for only two elements.

This JSFiddle shows a working example with how it can be done https://jsfiddle.net/bou7mqk3/1/

Answer 2

这可以满足您的需求吗？将div（#navbar和.navtext）放在包装器div中，然后将悬停样式放在这些选择器中：

#wrapper:hover #homenav

和

#wrapper:hover .navtex

请参阅小提琴here。

但是悬停样式会悬停在整个包装div上。

Answer 3

您只需要在链接上放置一个类。就像在父，一个标签，两个元素嵌套在里面。

在此HTML中，唯一的变化是链接上的其他类 - ＆＃39;您的班级＆＃39;，我删除了不必要的syncedHover类：

<div class="col-md-2 col-sm-1">
    <a href="#" title="HOME" style="margin-left:10px;" class="your-class">
        <div id="homenav"></div>
        <div class="navtext">HOME</div>
    </a>
</div>

然后将CSS更新为：

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

.your-class:hover .navtext{
    color: #ee2e24;
}

根本不需要JavaScript！

Hover对class和id的影响相互关联？

3 个答案: