How to make image appear upon hover over text using css?


Tags: html,css

Problem :

I have a list of text and I want a small image appears on the side to it when a user hovers over it each line of text. I already tried making the image "visibility:hidden" and then on hover over the link text "visibility: visible," but it does not work for me. Help please.

JSFiddle link: http://jsfiddle.net/ML9wT/2/

edit: the link.

HTML

<ul class="song-links">
    <li id="track-one"><span class="num-color">1.</span>
    <a href="#">one<div class="song-selector"><img src="http://placehold.it/25x25"></img></div></a>
    </li>


    <li id="track-two"><span class="num-color">2.</span>
    <a href="#">two<div class="song-selector"><img src="http://placehold.it/25x25"></img></div></a>
    </li>

    <li id="track-three"><span class="num-color">2.</span>
    <a href="#">three<div class="song-selector"><img src="http://placehold.it/25x25"></img></div></a>
    </li>

</ul>

CSS

.song-links {
letter-spacing: 1px;
list-style: none;
color: black;
visibility: visible;
}

.song-selector {
display: inline;
margin-left: 8px;
}


Solution :

Try:

.song-links {
  letter-spacing: 1px;
  list-style: none;
  color: black;
}

.song-selector {
  display: inline;
  margin-left: 8px;
  visibility: hidden;
}

.song-links li:hover .song-selector {
  visibility: visible;
}

    CSS Howto..

    How to center nested divs with rotation with CSS3?

    How to achieve vertical alignmernt of text paragraphs between Bootstrap columns

    How to get the header and navbar on top?

    How to change list item color with JQuery

    How to limit a table cell to one line of text using CSS?

    How can i increase the round corner button width dynamically depends on the text size in CSS?

    How to apply css on one html file only

    How to centralise a button div

    How to override CSS in joomla template

    How to use another brackets/tabs policy for my CSS?

    How to divide in 4 equal parts a li menu

    How to include 3 background images in a single css?

    How do you set background-color rgba on the body with background-image also?

    CSS menu list items need to show inside div container

    How can I make my form autoscale correctly?

    How to use absolute positioning without overlap effect

    How to overlap items in an unordered list using CSS?

    How to color portion of text using css or jquery

    How to not inherit width in css?

    How to magnify a pure CSS menu item when hovering using JS?

    How can I display two images horizontally?

    How to Indent using HTML or CSS

    css: how to target p a img

    How to style for first class css

    How to make a CSS horizontal navigation menu?

    How to locate which css include is used for an element

    How to scale the image size in a sprite

    How to freeze frame with css

    jQueryUI tabs mouseover a disabled link, how do I change the cursor so it doesn't appear clickable?

    How to position a html element under a fixed div