I have two div elements that I want both to CSS pulsate when hovering either

问题

I have two div elements that I want both to puslate (CSS animation) if mouse hovers on any one of them. There a simple code following. In my page they are not next each other. The above code does not works.

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>

回答1:

If you want to do it only with CSS, you can add them both to the same container and use the container's hover selector.

Notice that this solution will make the hover animation even if the container is being hovered outside of these two elements. You can walk around this issue with a little trick that'll make the container stay "invisible", although it might be a bit non-flexible.

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;
}

回答2:

Add jQuery and here's a solution, DEMO

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

回答3:

Just put them inside a container with display:inline; and then use

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

Demo: http://jsfiddle.net/GcyqL/8/

Pure css.

来源：https://stackoverflow.com/questions/18547180/i-have-two-div-elements-that-i-want-both-to-css-pulsate-when-hovering-either

标签

html

css

css3

css-animations