How can I trigger multiple hover actions/events?

Question

I have 5 boxes here, as I hover from one end to another the boxes change color, the transition delay is 6s hence the animations are slow.

How can I trigger multiple hover events,

that is when I move the mouse over a div, it should trigger its hover event.

Example: when I move mouse from left to right, all the divs' hover events should run.

In my code the first hover effect is triggered, then it waits the event to end, then starts the next hover effect on some other div which is just under the pointer.

.box{
  display: inline-block;
  height: 50px;
  width: 50px;
  background-color: #000;
  color: #fff;
  -webkit-transition: .6s 0s;
  text-align:center;
}

#box-1:hover{background-color: #C8F608;}
#box-2:hover{background-color: #23DC07;}
#box-3:hover{background-color: #07D7D7;}
#box-4:hover{background-color: #076BD7;}
#box-5:hover{background-color: #1307D7;}

<div class="container">
  <div class="box" id="box-1">bx1</div>
  <div class="box" id="box-2">bx2</div>
  <div class="box" id="box-3">bx3</div>
  <div class="box" id="box-4">bx4</div>
  <div class="box" id="box-5">bx5</div>
</div>

here's my jsfiddle

thank you for any help :)

techfoobar · Accepted Answer · 2014-07-20 20:02:41Z

2

The background-color indicated in :hover no longer applies when you leave the element. So the element will go back to its unhovered state. You cannot prevent this from happening when depending solely on :hover.

Instead, you can add a class on hover, so that the effect remains.

Demo: http://jsfiddle.net/LYT8J/3/

CSS

#box-1:hover, #box-1.hovered {background-color: #C8F608;}
#box-2:hover, #box-2.hovered {background-color: #23DC07;}
#box-3:hover, #box-3.hovered {background-color: #07D7D7;}
#box-4:hover, #box-4.hovered {background-color: #076BD7;}
#box-5:hover, #box-5.hovered {background-color: #1307D7;}

JavaScript

$('.box').mouseover(function() {
    $(this).addClass('hovered');
});
$('.container').mouseleave(function() {
    $(this).find('.hovered').removeClass('hovered');
});

answered Jul 20, 2014 at 20:02

techfoobar

66.8k14 gold badges117 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shiladitya · Accepted Answer · 2017-10-26 11:48:03Z

You want all of your div tags to trigger the hover effect when hovering over one, correct?

If that is the case you can use jQuery to solve this.

$(document).ready(function() {
  $("div[id^='box-']").mouseenter(function() {
    $("#box-1").css("background-color", "#C8F608");
    $("#box-2").css("background-color", "#23DC07");
    $("#box-3").css("background-color", "#07D7D7");
    $("#box-4").css("background-color", "#076BD7");
    $("#box-5").css("background-color", "#1307D7");
  });

  $("div[id^='box-']").mouseleave(function() {
    $("#box-1").css("background-color", "#EEEEEE");
    $("#box-2").css("background-color", "#EEEEEE");
    $("#box-3").css("background-color", "#EEEEEE");
    $("#box-4").css("background-color", "#EEEEEE");
    $("#box-5").css("background-color", "#EEEEEE");
  });
});

This should do what you want. When you enter any div tag with id that begins with box- it will trigger this mouseenter event to change the background-color of each div individually. The mouseleave event will restore the background-color to it's original background-color. You didn't list the original color so I just said #EEEEEE for a light gray color.

Collectives™ on Stack Overflow

How can I trigger multiple hover actions/events?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related