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
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
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
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; }
Edited to fit OP’s request to change content of a singular box based on hover of other boxes. Using the general sibling combinator, we can select a div with the class results when a box is hovered. JSFiddle Demo HTML <div class=”container”> <div class=”box1″>1</div> <div class=”box2″>2</div> <div class=”results”></div> </div> CSS .box1, .box2 { display: inline-block; … Read more
Here is the html: <div id=”container”> <img id=”image”/> <div id=”overlay”> <a href=”www.site1.com”>Link 1</a><br> <a href=”www.site2.com”>Link 2</a><br> <a href=”www.site3.com”>Link 3</a><br> </div> </div> Here is the css: #container { position:relative; width:100px; height:100px; } #image { position:absolute; width:100%; height: 100%; background:black;//should be url of your image } #overlay { position:absolute; width:100%; height:100%; background:gray; opacity:0; } #overlay:hover { opacity:1; … Read more