If the hover is triggered by JS, just pause script execution via the keyboard. This is a much simpler way of freezing the DOM than the other answers suggest. Here’s how you do it in Chrome. I’m sure Firefox has an equivalent procedure: Open up Developer Tools and go to Sources. Note the shortcut to … Read more
Since this part of CSS Media Queries Level 4 has now been widely implemented since 2018, you can use this: @media (hover: hover) { button:hover { background-color: blue; } } Or in English: “If the browser supports proper/true/real/non-emulated hovering (e.g. has a mouse-like primary input device), then apply this style when buttons are hovered over.” … Read more
tl;dr use this: https://jsfiddle.net/57tmy8j3/ If you’re interested why or what other options there are, read on. Quick’n’dirty – remove :hover styles using JS You can remove all the CSS rules containing :hover using Javascript. This has the advantage of not having to touch CSS and being compatible even with older browsers. function hasTouch() { return … Read more
If you want to perform a hover like event on any HTML element, then you can do it like this. HTML <div (mouseenter) =”mouseEnter(‘div a’) ” (mouseleave) =”mouseLeave(‘div A’)”> <h2>Div A</h2> </div> <div (mouseenter) =”mouseEnter(‘div b’)” (mouseleave) =”mouseLeave(‘div B’)”> <h2>Div B</h2> </div> Component import { Component } from ‘@angular/core’; @Component({ moduleId: module.id, selector: ‘basic-detail’, templateUrl: … Read more
Pre-set the width by using an invisible pseudo-element which has the same content and styling as the parent hover style. Use a data attribute, like title, as the source for content. li { display: inline-block; font-size: 0; } li a { display:inline-block; text-align:center; font: normal 16px Arial; text-transform: uppercase; } a:hover { font-weight:bold; } /* … Read more
Use the title attribute, for example: <div title=”them’s hoverin’ words”>hover me</div> or: <span title=”them’s hoverin’ words”>hover me</span>
If the cube is directly inside the container: #container:hover > #cube { background-color: yellow; } If cube is next to (after containers closing tag) the container: #container:hover + #cube { background-color: yellow; } If the cube is somewhere inside the container: #container:hover #cube { background-color: yellow; } If the cube is a sibling of the … Read more
In light of the passage of time, as people have mentioned, you can now safely just use: li { cursor: pointer; }