Question

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

现在，我试图做的是在翻转它时使用外部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 */
}

Answer 2

我可能非常偏离轨道，但当你将鼠标悬停在主要div上时，你可以对每个div使用.addClass吗？

像这样FIDDLE（我没有添加一个类，我只是使用.animate来获得我的观点）

$( "#Activate" ).mouseover(function() {

$("#Activate > .hi-icon-wrap").each(function (index) {
    $(this).delay(index * 500).animate({
        opacity: 0.5
    }, 500);
});
  });

  $( "#Activate" ).mouseout(function() {
    $(".hi-icon-wrap").animate({opacity: 1}, 500);
});

道歉，如果这根本不是你要找的东西。

将鼠标悬停在一个div上会触发其他div徘徊

2 个答案: