hover

Is there an opposite CSS pseudo-class to :hover?

by

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

How do I simulate a hover with a touch in touch enabled browsers?

by

OK, I’ve worked it out! It involves changing the CSS slightly and adding some JS. Using jQuery to make it easy: $(document).ready(function() { $(‘.hover’).on(‘touchstart touchend’, function(e) { e.preventDefault(); $(this).toggleClass(‘hover_effect’); }); }); In english: when you start or end a touch, turn the class hover_effect on or off. Then, in your HTML, add a class hover … Read more

Is it possible to change only the alpha of a rgba background colour on hover?

by

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

iPad/iPhone hover problem causes the user to double click a link

by

Haven’t tested this fully but since iOS fires touch events, this could work, assuming you are in a jQuery setting. $(‘a’).on(‘click touchend’, function(e) { var el = $(this); var link = el.attr(‘href’); window.location = link; }); The idea is that Mobile WebKit fires a touchend event at the end of a tap so we listen … Read more

Fade Effect on Link Hover?

by

Nowadays people are just using CSS3 transitions because it’s a lot easier than messing with JS, browser support is reasonably good and it’s merely cosmetic so it doesn’t matter if it doesn’t work. Something like this gets the job done: a { color:blue; /* First we need to help some browsers along for this to … Read more

What is the opposite of :hover (on mouse leave)?

by

If I understand correctly you could do the same thing by moving your transitions to the link rather than the hover state: ul li a { color:#999; transition: color 0.5s linear; /* vendorless fallback */ -o-transition: color 0.5s linear; /* opera */ -ms-transition: color 0.5s linear; /* IE 10 */ -moz-transition: color 0.5s linear; /* … Read more

How can I access a hover state in reactjs?

by

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

Mouseover or hover vue.js

by

i feel above logics for hover is incorrect. it just inverse when mouse hovers. i have used below code. it seems to work perfectly alright. <div @mouseover=”upHere = true” @mouseleave=”upHere = false” > <h2> Something Something </h2> <some-component v-show=”upHere”></some-component> </div> on vue instance data: { upHere: false } Hope that helps

CSS transition effect makes image blurry / moves image 1px, in Chrome?

by

2020 update If you have issues with blurry images, be sure to check answers from below as well, especially the image-rendering CSS property. For best practice accessibility and SEO wise you could replace the background image with an <img> tag using object-fit CSS property. Original answer Try this in your CSS: .your-class-name { /* … … Read more