Hover style cannot be applied when mouse clicks in chrome

Question

Everything:

[UPDATE] I find another way to implement this, and not a solution, but just a trick: Use mousedown as an event trigger (because I need a drag action, so there must be a mousedown event anyway), inside, bind the mouseover event to this interval ( I don’t know why, but mouse binding inside mousedown can make mouseover work on a range) , give it a new class that will change the background color;

Chrome 40 issue:

I set a style: span { background-color:red; } span:hover { background-color:blue; } <span>TEST AREA</span> 

When I mousedown then mouseover, the background color has not changed

It was reviewed here without a published solution: https://code.google.com/p/chromium/issues/detail?id=122746

I am testing IE11 Firefox35, they all work very well. Only Chrome 40 does not work :(

Can someone help make the style applicable or give a way to launch a mouseover in this range with the accepted drag action (I want to do something drag over it, and changing the backgroundcolor indicates the drag is above the target area.)? Thanks!

Answer 1

Interesting chrome bug! I did not notice this until I came to your question. It made me think about how FF handled this event.

So, I went on to develop a simple piece of code that tracks the event at which hover and click events are fired.

You can find the script script here.

Now, when you delete comments in the last segment,

 $(document).mousemove(function () { console.clear(); console.log('hovered element now: '+hoveredElement+ ' -- & -- '+'clicked element now: '+ clickedElement); }); 

and then comment on the section below

 $(hoveredElement).mouseenter(function () { $(this).addClass('jsHover'); }).mouseleave(function () { $(this).removeClass('jsHover'); }); 

Now the code is replicating the problem you mentioned (try in chrome and FF I was able to replicate in chrome 41).

If you pay attention to the console of the respective browsers, my conclusions are that when you click the span element and then drag the mouse to enter the element, this happens ...

In Chrome

• Just hover over the first element of the range without entering a space: Console output

   hovered element now: BODY -- & -- clicked element now: undefined 

• Now click the left mouse button (mousedown and mouseup): console output

   hovered element now: BODY -- & -- clicked element now: BODY 

• Now just move your hair with the mouse: console output

   hovered element now: BODY -- & -- clicked element now: BODY 

Now let's do the same in Firefox, right?

• Just hover over the first element of the range without entering a space: Console output

   hovered element now: BODY -- & -- clicked element now: undefined 

• Now click the left mouse button (mousedown and mouseup): console output

   hovered element now: BODY -- & -- clicked element now: undefined 

  Note that the clicked element is now set to undefined . compare it with a chrome result

• Now just move your hair with the mouse: console output

   hovered element now: BODY -- & -- clicked element now: BODY 

** Now the next set of tests **

4. Now click outside the first span element and holding the mouse, drag it to the span element and then release it. Do not move the mouse after release. Console exit in chrome

    hovered element now: SPAN -- & -- clicked element now: BODY 

   Console exit for FF

   hovered element now: SPAN -- & -- clicked element now: undefined

Note the difference in conclusions here.

Now, if you ask me why this happens between browsers, I don’t know. All I can say is that the :hover pseudo- :hover does not start in chrome, but in FF it fires.

So what solution do you ask?

Ok, here is my workaround.

Just for this event, when this happens, add the hover class manually. it does chrome, adding the class dynamically, while in FF it is already in a blissful state;)

So now in fiddle , uncomment the code snippet again ...

 $(hoveredElement).mouseenter(function () { $(this).addClass('jsHover'); }).mouseleave(function () { $(this).removeClass('jsHover'); }); 

and comment on the last section that the console displays, if you wish.

What this means is adding the jsHover class (which is defined along with the regular: alias of the hover class in css) to the span element when a specific set of events occurs that causes our little problem.

Full code snippet here ...

 $(document).ready(function () { var hoveredElement; var clickedElement; $(document).mousemove(function (event) { hoveredElement = event.target.nodeName; $(hoveredElement).mouseenter(function () { $(this).addClass('jsHover'); }).mouseleave(function () { $(this).removeClass('jsHover'); }); //console.log('hovered element now: ', hoveredElement); return hoveredElement; }); $(document).click(function (event) { clickedElement = event.target.nodeName; //console.log('clicked element now: ', clickedElement); return clickedElement; }); /* $(document).mousemove(function () { console.clear(); console.log('hovered element now: '+hoveredElement+ ' -- & -- '+'clicked element now: '+ clickedElement); }); */ }); 

  .page { height:100%; width:100%; /*background:rgba(12, 132, 49, 0.3);*/ } div { height:200px; width:250px; /*background:pink;*/ } span { /*background-color:cyan;*/ } span:hover, span.jsHover { background-color:blue; color:white; font-weight:bold; } .activeElement { background:#bfbfbf; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <span>before page div span element</span> <br/> <hr/> <div class="page"> <div> <span>inside pade div span element </span> <p>wjhjhewh</p> </div> </div> 

Hope this helps. Happy coding