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 control div size when other divs are changing [duplicate]

    jQuery slideshow with separate div containing image specific text

    How to remove the yellow row highlighting

    CSS - How to remove comments and make CSS one line

    How should I go about this html form with Javascript

    How do I get a video to fit in a specified area?

    How to select a language from a popup click button in css/html ?

    How to add Get in Touch page in webpage? [closed]

    How can I have a 2 column layout with one of the columns with a fixed width and the other with the remaining width?

    ASP.NET - how to retrieve CSS styles applied by javascript on page postback?

    How to use CSS :hover to make extra div block elements display?

    How to add css to form elements if attribute class is already being used in Jquery

    How to float 3 LI's to the left and 3 to the right and maintain original sequence?

    how to create 100% vertical line in css

    How do you create a perfectly scalable button in HTML/CSS3/jQuery/Javascript using images to provide borders and corners?

    How can I make a pointy arrow with a div in CSS

    CSS/PHP: How to make the next div appear on the side instead

    How to set a CSS property with a variable in JQuery?

    How to overlay image with color in CSS?

    How do I remove a CSS class from one anchor and assign it to another using jquery?

    Trying to align text with background image. If below a certain resolution the text to the left moves in. How can I fix this?

    How does CSS resize images?

    How to completely show hide tabs on onclick event in HTML CSS Javascript

    How to center a group of images in HTML/CSS?

    How to fix unable to load css file in maven build on maven springmvc project [closed]

    Knockout - How to bind outer container css from set of checkboxes?

    How to override background-color for all classes using css?

    How To Design a Website for the Non-Designer that takes full advantage of JQuery on the client?

    How do I get the slide in as you scroll down (CSS Trick) technique to work in Safari?

    How to make bootstrap 3 navbar not wrap