Another solution would be to use -webkit-backface-visibility: hidden; on the hover element that has the opacity. Backface-visibility relates to transform, so @Beskow‘s has got something to do with it. Since it is a webkit specific problem you only need to specify the backface-visibility for webkit. There are other vendor prefixes. See http://css-tricks.com/almanac/properties/b/backface-visibility/ for more info.
You can achieve this with this simple CSS/HTML: .image-container { position: relative; width: 200px; height: 300px; } .image-container .after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; color: #FFF; } .image-container:hover .after { display: block; background: rgba(0, 0, 0, .6); } HTML <div class=”image-container”> <img src=”http://lorempixel.com/300/200″ /> <div class=”after”>This is … Read more
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
There are two approaches you can take, to have a hovered element affect (E) another element (F): F is a child-element of E, or F is a later-sibling (or sibling’s descendant) element of E (in that E appears in the mark-up/DOM before F): To illustrate the first of these options (F as a descendant/child of … Read more
You can use CSS3 transitions with rotate() to spin the image on hover. Rotating image : img { transition: transform .7s ease-in-out; } img:hover { transform: rotate(360deg); } <img src=”https://i.stack.imgur.com/BLkKe.jpg” width=”100″ height=”100″/> Here is a fiddle DEMO More info and references : a guide about CSS transitions on MDN a guide about CSS transforms on … Read more
a.button a:hover means “a link that’s being hovered over that is a child of a link with the class button“. Go instead for a.button:hover.
I take it from your question that your hover effect changes the content of your page. In that case, my advice is to: Add hover effects on touchstart and mouseenter. Remove hover effects on mouseleave, touchmove and click. Alternatively, you can edit your page that there is no content change. Background In order to simulate … Read more
I have really simple solution for this. just create a new class .noHover{ pointer-events: none; } and use this to disable any event on it. use it like: <a href=”” class=”btn noHover”>You cant touch ME :P</a>
The :hover pseudo-class needs a pointing (graphical input) device, capable of distinguishing the actions pointing and selecting/activating. Usually on mobile devices with a touch interface you don’t have the former, only the latter. Also some pen interfaces only allow activating, not pointing. The :hover pseudo-class applies while the user designates an element (with some pointing … Read more
You can not address an element that is referenced via use. The specs say: For user agents that support Styling with CSS, the conceptual deep cloning of the referenced element into a non-exposed DOM tree also copies any property values resulting from the CSS cascade ([CSS2], chapter 6) on the referenced element and its contents. … Read more