Menu
I have an icon that I display on top, right of a div on hovering over the div. My code is like this:
<div class='edit_hover_class'> <!-- some code --> </div> And the corresponding css file contains:
.edit_hover_class:hover { background: url("trash.gif") no-repeat scroll right top; } I want to attach a link to the edit icon, is it possible with plain css? If so, how?
343
To display div element using CSS on hover a tag: First, set the div element invisible i.e display:none;. By using the adjacent sibling selector and hover on a tag to display the div element.
You can add a little icon to links to indicate what type of link it is. Instead of using a img tag for each link, you should use CSS to add them, by matching the URL. The CSS selector a[href*="twitter.com/"] matches any “a” tag with “href” attribute that has value contanining the string “twitter.com/”.
Answer: Use the CSS background-image property You can simply use the CSS background-image property in combination with the :hover pseudo-class to replace or change the image on mouseover.
HTML: Use a container element (like <div>) and add the "tooltip" class to it. When the user mouse over this <div>, it will show the tooltip text. The tooltip text is placed inside an inline element (like <span>) with class="tooltiptext" .
You could hide a link until hover like so:
<div class='edit_hover_class'> <a href='#'><img src='icons/trash.gif' /></a> </div> .edit_hover_class a{ visibility:hidden; } .edit_hover_class:hover a { visibility:visible; } See jsfiddle:
http://jsfiddle.net/Auzm5/
Or if you only want the icon to link, use CSS visibility:
http://jsfiddle.net/Auzm5/1/
112
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
