hover style can not apply when press mouse button in chrome hover style can not apply when press mouse button in chrome google-chrome google-chrome

hover style can not apply when press mouse button in chrome


Interesting chrome bug! I had not noticed it till I came upon your question. This got me thinking how FF was handling this event.

So I went upon devising a simple code snippet which tracks the event at which the hover and click events trigger.

You can find this snippet fiddle here.

Now in the fiddle , if you remove the comments in the last segment,

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

and then comment the section below ,

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

Now the code replicates the issue that you mentioned ( try it in chrome and FF I was able to replicate in chrome 41).

If you pay attention to the console of the respective browsers, my findings were that when you click outside of the span element and then drag the mouse to enter the element, this is what happens...

In Chrome

  1. Just mouse hover outside the first span element without entering the span space : Console output

    hovered element now: BODY -- & -- clicked element now: undefined
  2. Now click the left button in mouse( mousedown and mouseup) : console output

    hovered element now: BODY -- & -- clicked element now: BODY
  3. Now just move the mouse just a hair : console output

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

Now lets do the same thing in Firefox, shall we?

  1. Just mouse hover outside the first span element without entering the span space : Console output

    hovered element now: BODY -- & -- clicked element now: undefined
  2. Now click the left button in mouse( mousedown and mouseup) : console output

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

    Notice it says undefined for clicked element now. compare it with chrome's result

  3. Now just move the mouse just a hair : console output

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

**Now next set of tests **

  1. Now click outside the first span element and without releasing the mouse drag it to within the span element and then release. Do not move the mouse after release. Console output in chrome

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

    Console output for FF

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

Notice the difference in outputs here as well.

Now if you ask me why that is happening between the browsers, that I do not know. All I can say that the pseudo class of :hover is not fired in chrome but in FF it fires.

So what is the solution you ask?

Well here is my workaround.

Simply for that event when it occurs add the hover class manually. this makes chrome add the class dynamically whereas in FF it is already in a blissful state ;)

So now in the fiddle again uncomment the piece of code...

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

and comment the last section which does the console output if you so wish.

What this does is adds a jsHover class (which is defined along with the regular :hover pseudo class in css) to the span element when the particular set of event which triggers our little issue, occurs.

The complete Code Snippet is 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