Question

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

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 Demo

#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

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

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

Answer 3

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

即可

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

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

Pure css。

我有两个div元素，我想要两个鼠标悬停时两个脉动

3 个答案: