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

Question

All:

[UPDATE] I find another way to implement this, not solution, but just a working trick: Use mousedown as a event trigger(because I need a drag action, so there should be a mousedown event anyway), inside that, bind mouseover event to that span(I do not know why, but bind mouseover inside mousedown can make mouseover work on span), give it a new class which change the background color;

The problem I had with Chrome 40 is:

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 not changed

It has been addressed here with no solution posted: https://code.google.com/p/chromium/issues/detail?id=122746

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

Could anyone help to make the style apply or give a way to trigger mouseover on that span with drag action being taken( I want to do is drag something over it and the backgroundcolor change indicates the drag is over the target area.)? Thanks!

Answer 1

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 **

4. 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>