It’s simple. Wrap the image and the “appear on hover” description in a div with the same dimensions of the image. Then, with some CSS, order the description to appear while hovering that div. /* quick reset */ * { margin: 0; padding: 0; border: 0; } /* relevant styles */ .img__wrap { position: relative; … Read more
You can use style property for this. For example, if you want to change border – document.elm.style.border = “3px solid #FF0000”; similarly for color – document.getElementById(“p2″).style.color=”blue”; Best thing is you define a class and do this – document.getElementById(“p2”).className = “classname”; (Cross Browser artifacts must be considered accordingly).
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
You can use transitions to delay the :hover effect you want, if the effect is CSS-based. For example div{ transition: 0s background-color; } div:hover{ background-color:red; transition-delay:1s; } this will delay applying the the hover effects (background-color in this case) for one second. Demo of delay on both hover on and off: div{ display:inline-block; padding:5px; margin:10px; … Read more
You don’t need JavaScript for this. Some CSS would do it. Here is an example: <html> <style type=”text/css”> .section { background:#ccc; } .layer { background:#ddd; } .section:hover img { border:2px solid #333; } .section:hover .layer { border:2px solid #F90; } </style> </head> <body> <div class=”section”> <img src=”https://stackoverflow.com/questions/1462360/myImage.jpg” /> <div class=”layer”>Lorem Ipsum</div> </div> </body> </html>
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.
The “a:hover” literally tells the browser to change the properties for the <a>-tag, when the mouse is hovered over it. What you perhaps meant was “the div:hover” instead, which would trigger when the div was chosen. Just to make sure, if you want to change only one particular div, give it an id (“<div id=’something’>“) … Read more
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 … 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>
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