javascript - 悬停在一个 div 上会触发其他 div 悬停在里面

Question

好的，正在做某事但似乎无法弄清楚已经尝试了一些不同的东西，但似乎没有什么可以解决它。所以这是我正在做的事情的链接......

http://modocom.ca/logo/

现在我想要做的是在您滚动时拥有外部 div，它会立即为所有内部 div 设置动画。也试图实现这样可以点击外部 div 转到链接。

这是 HTML...

<div>
<div class="hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5d transition">
        <a href="#" class="hi-icon hi-icon-modo-m transition">modo</a>
</div>
<div class="hi-icon-wrap hi-icon-effect-6 hi-icon-effect-5d transition">
        <a href="#" class="hi-icon hi-icon-modo-o transition">modo</a>
</div>    
<div class="hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5d transition">
        <a href="#" class="hi-icon hi-icon-modo-d transition">modo</a>
</div>
<div class="hi-icon-wrap hi-icon-effect-6 hi-icon-effect-5d transition">
        <a href="#" class="hi-icon hi-icon-modo-star transition">modo</a>
</div>

内部悬停的一些 CSS...

    .hi-icon-effect-5 .hi-icon {
    border-top: 5px solid #C30;
    overflow: hidden;
    -webkit-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
    -moz-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
    transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}

.hi-icon-effect-6 .hi-icon {
    background: rgba(255,255,255,1);
    border-top: 5px solid #000;
    overflow: hidden;
    -webkit-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
    -moz-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
    transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}

.hi-icon-effect-5 .hi-icon:after {
    display: none;
}

.hi-icon-effect-6 .hi-icon:after {
    display: none;
}

.hi-icon-effect-7 .hi-icon:after {
    display: none;
}

.no-touch .hi-icon-effect-5 .hi-icon:hover {
    background: #C30;
    color: #FFF; /* Hover Icon */
}

.no-touch .hi-icon-effect-6 .hi-icon:hover {
    background: #000;
    color: #FFF; /* Hover Icon */
}

希望这是有道理的。

Answer 1

您需要向您的主 div 添加一个类...在这种情况下，假设您将 `class=maindiv' 添加到包含的 div。

然后在你的 css 中使用这个:

.maindiv:hover .no-touch .hi-icon-effect-5 .hi-icon {
    background: #C30;
    color: #FFF; /* Hover Icon */
}

.maindiv:hover .no-touch .hi-icon-effect-6 .hi-icon {
    background: #000;
    color: #FFF; /* Hover Icon */
}

不是将鼠标悬停在 .hi-icon 上时应用效果，而是将鼠标悬停在 .maindiv 上时应用效果

更新

将此添加到您的 css 而不是上面的:

.maindiv:hover .hi-icon-effect-5 .hi-icon{
    background: #C30;
    color: #FFF; /* Hover Icon */
}

.maindiv:hover .hi-icon-effect-6 .hi-icon {
    background: #000;
    color: #FFF; /* Hover Icon */
}