html - 我有两个 div 元素，我希望它们在悬停时都能 CSS 脉动

Question

我有两个 div 元素，如果鼠标悬停在其中任何一个上，我都希望它们都 puslate（CSS 动画）。下面有一个简单的代码。在我的页面中，它们不是相邻的。上面的代码不起作用。

jsfiddle：http: //jsfiddle.net/GcyqL/1/

CSS：

#counter {
   width:120px;
   height:25px;
   text-align: center;
   border-style: solid;
   border-width: 1px;
   background-color: rgb(142, 197, 255);
   font-weight: bold;
}

#mem_val {
   width:120px;
   height:25px;
   text-align: center;
   border-style: solid;
   border-width: 1px;
   background-color: rgb(142, 197, 255);
   font-weight: bold;
}

div.intro:hover{
   -webkit-animation: pulsate 1s infinite alternate;
   -moz-animation: pulsate 1s infinite alternate;
   -animation: pulsate 1s infinite alternate;
   text-shadow: 0 0 8px #ccc;
}

@-webkit-keyframes pulsate {
   from { box-shadow: 0 0 10px #333; }
   to { box-shadow: 0 0 20px #c00; }
}

@-moz-keyframes pulsate {
   from { box-shadow: 0 0 10px #333; }
   to { box-shadow: 0 0 20px #c00; }
}

@keyframes pulsate {
   from { box-shadow: 0 0 10px #333; }
   to { box-shadow: 0 0 20px #c00; }
}

HTML

<div id="mem_val" class="intro" >mem_val</div><br><br>
<div id="counter" class="intro">counter</div><br><br>

Answer 1

如果您只想使用 CSS，您可以将它们都添加到同一个容器中并使用容器的hover选择器。

hover请注意，即使容器悬停在这两个元素之外，此解决方案也会制作动画。你可以用一个小技巧来解决这个问题，让容器保持“不可见”，尽管它可能有点不灵活。

jsFiddle 演示

#container {
    width:0;
    height:0;
    overflow: visible;
}

/* Old selector: div.intro:hover */
#container:hover div.intro {
    -webkit-animation: pulsate 1s infinite alternate;
    -moz-animation: pulsate 1s infinite alternate;
    -animation: pulsate 1s infinite alternate;
    text-shadow: 0 0 8px #ccc;
}

Answer 2

只需将它们放入容器中display:inline;，然后使用

#container:hover div {
    //plusate...
}

演示：http: //jsfiddle.net/GcyqL/8/

纯CSS。

Answer 3

添加jQuery，这是一个解决方案，DEMO

$(document).ready(function(){
    $('.pulsate').hover(
        function(){
            $('.pulsate').addClass('intro');
        },
        function(){
            $('.pulsate').removeClass('intro');
        }
    );
});