The following css does the trick for modern browsers (not IE10-): .b:after { pointer-events: none; } pointer-events: none allows elements to not receive hover/click events. See this fiddle. Caution pointer-events support for non-SVG elements is in a relative early state. developer.mozilla.org gives you the following warning: The use of pointer-events in CSS for non-SVG elements … Read more
In all presented answers, I don’t see the most simple and obvious one (maybe I’m missing something in OP question). But, if someone stumble upon this later, and needs fast and simple solution in pure JS.. You do it by changing element className ondragover, and changing back to original class ondragleave my_element.ondragover = function(ev) { … Read more
Yes, use :not(:hover) .child:not(:hover){ opacity: 0.3; } .child { display: inline-block; background: #000; border: 1px solid #fff; width: 50px; height: 50px; transition: 0.4s; } .child:not(:hover) { opacity: 0.3; } <div class=”parent”> <div class=”child”></div> <div class=”child”></div> <div class=”child”></div> <div class=”child”></div> <div class=”child”></div> </div> Another example; I think you want to: “when one is hovered, dim all … Read more
Basically you can’t : How to style the parent element when hovering a child element? But a trick is to use a sibling element : http://jsfiddle.net/k3Zdt/8/ .parent { width: 100px; height: 100px; padding: 50px; } .child { height: 100px; width: 100px; background: #355E95; transition: background-color 1s; position: relative; top: -200px; } .child:hover { background: #000; … Read more
To hide an element, use: display: none; visibility: hidden; To show an element, use: display: block; visibility: visible; The difference is: Visibility handles the visibility of the tag, the display handles space it occupies on the page. If you set the visibility and do not change the display, even if the tags are not seen, … Read more
React components expose all the standard Javascript mouse events in their top-level interface. Of course, you can still use :hover in your CSS, and that may be adequate for some of your needs, but for the more advanced behaviors triggered by a hover you’ll need to use the Javascript. So to manage hover interactions, you’ll … Read more
This is now possible with custom properties: .brown { –rgb: 118, 76, 41; } .green { –rgb: 51, 91, 11; } a { display: block; position: relative; } div { position: absolute; bottom: 0; background-color: rgba(var(–rgb), 0.8); } a:hover div { background-color: rgba(var(–rgb), 1); } To understand how this works, see How do I apply … Read more
That should work fine in IE8. A stab in the dark: Make sure you have a doctype as the very first line of your HTML that triggers Standards Mode, such as: <!DOCTYPE html> In Quirks Mode, IE emulates version 5.5, which does not support :hover on elements other than a.
You can add a transparent border to the non-hover state to avoid the “jumpiness” when the border appears: http://jsfiddle.net/TEUhM/3/ #homeheader a:visited, #homeheader a{ border:1px solid transparent; }
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