Hover Style Can Not Apply When Press Mouse Button in Chrome

:hover does not seem to be working on custom buttons

1) Open your page in Google Chrome;

2) Press F12 for "Developer Tools" to open;

3) Select your problematic input;

4) On the right you have the applied styles;

5) On the "Styles" tab, click on the 2nd icon, a cursor inside a dotted rectangle;

6) Select ":hover", so that you can see what's happening when your input is being hovered and find the problem!

CSS selector for :hover plus no mouse-button pressed?

Basically the if mouse clicked css selector method id :active so what you would have to do is this:

.tool {
    min-height: 18px;
    height: auto;
}
.tool:active .tooltip {
    display: none !important;
}
.tool:hover .tooltip {
    display: block;
}
.tooltip {
    display: none;
}

The order is crucial because the higher rules take priority

Here is a working fiddle: http://jsfiddle.net/Hive7/bsnnb6sf/

Also you might want to consider using visibility instead of display because otherwise you need to set the height of the parent:

.tool:active .tooltip {
    visibility: hidden !important;
}
.tool:hover .tooltip {
    visibility: visible;
}
.tooltip {
    visibility: hidden;
}

Example fiddle: http://jsfiddle.net/Hive7/bsnnb6sf/1/

Javascript/css/html - prevent mousedown from disabling hover

There isn't really a pure CSS way to solve this, simply because that's how it works. Not much way to override that stuff with CSS.

What you'll have to do instead is manually implement your own hover functionality by using mouseenter and/or mouseover and mouseout and/or mouseleave.

Something like this:

const myElement = document.querySelector('#myElement');
myElement.addEventListener('mouseenter', ({ target }) => target.classList.add('hovering'));myElement.addEventListener('mouseleave', ({ target }) => target.classList.remove('hovering'));

div {  width: 100px;  height: 100px;  border: 1px solid #000;  background: #F00;}
div.hovering {  background: #0F0;}

<div id="myElement"></div>

How to use chrome web inspector to view hover code

Now you can see both the pseudo-class style rules and force them on elements.

To see the rules like :hover in the Styles pane click the small dotted box button in the top right.

To force an element into :hover state, right click it.

Alternatively, you can use Event Listener Breakpoints sidebar pane in the Scripts panel and select to pause in mouseover handlers.

---

Related Topics