Make an image appear on hover with Jquery

Question

I looked around online and could not find a specific answer or tutorial on what I would like to do with my hover navigation; The most I found was jquery coding for an image animation or background image animation.

My navigation at the moment is set up with a fade to a different color over hover at the moment. What I would like to do also is that when someone hovers over the navigation, not only does the link fade to a different color (Which I have working), but I also want a arrow image I have to appear to the left of the text. I'd love for it to fade with the text too, but if thats impossible, I'm not picky. To clarify, I do not want the arrow to be shown when the link is not being hovered over.

If it helps at all, here is the current fading jquery I have:

this.fadeLinks = function() {   

var selector = "#nav1 a"; 
var speed = "slow" 

var bgcolor = "#6c919a";    


$(selector).each(function(){ 
    $(this).css("position","relative");
    var html = $(this).html();
    $(this).html("<span class=\"one\">"+ html +"</span>");
    $(this).append("<span class=\"two\">"+ html +"</span>");        
    if($.browser.msie){
        $("span.one",$(this)).css("background",bgcolor);
        $("span.two",$(this)).css("background",bgcolor);    
        $("span.one",$(this)).css("opacity",1);         
    };
    $("span.two",$(this)).css("opacity",0);     
    $("span.two",$(this)).css("position","absolute");       
    $("span.two",$(this)).css("top","0");
    $("span.two",$(this)).css("left","0");      
    $(this).hover(
        function(){
            $("span.one",this).fadeTo(speed, 0);                
            $("span.two",this).fadeTo(speed, 1);
        },
        function(){
            $("span.one",this).fadeTo(speed, 1);    
            $("span.two",this).fadeTo(speed, 0);
        }           
    )
});
};

$(document).ready(function(){   
fadeLinks();
});

Here is the css for the navigation:

#nav1 {
width:730px;
top: -380px;
left: -2px;
font-size:20px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color:#ffffff;
padding-top:6px;
padding-bottom:10px;
position:relative;
text-align:center;
line-height:30px;
}


#nav1 a{
font-size:30px;
font-family: Tahoma, Geneva, sans-serif;
color:#fff;
text-decoration:none;
}
 #nav1 a span.two{
color:#069;
cursor:pointer;
}

The arrow image I want to appear is "images/arrow.png". I believe for this type of thing I'd need to put the png bug in my coding for IE, yes? Also, if I'd need to put something in my actual html for this, let me know. Thanks in advance!

What's the related mark-up for that? Ideally, a [JS Fiddle demo](http://jsfiddle.net/) would be good. — David Thomas, Jan 16 '11 at 10:16

score 0 · Answer 1 · answered Jan 16 '11 at 10:16

I would suggest putting an empty span or a div container in your code to hold the arrow image. You can then use a JQuery selector to fade those in when the hover event is called on the links.

You already have fadeTo in your code for what I'm guessing are the links, just add the code there to fade in the arrows as well using the CSS selector for the spans or divs that will represent the arrows.

score 0 · Answer 2 · answered Jan 16 '11 at 18:03

'Cloudy',

Below is some simple code similar to what I use. It works well if the height of your arrow image is less than or equal to the height of the text in the link.

Perhaps you could modify it to suit your purposes. As an aside, note the use of single quotes (') and double-quotes (") which does away with having to "escape" your double-quotes.

$('.navlink').each(function(){
    $(this).hover(
       function(){
            $(this).css({backgroundColor: "#F00", color: "#00F"})
                   .prepend('<img src="../icons/arrow.png" alt="" />');
        }
        ,
        function(){
            $(this).css({backgroundColor: "#0F0", color: "#F00"});
            $('img', this).remove()[0];
        }
    );
});

This does away with the "span"s, absolute positioning and having to copy the HTML etc.

Regards Neil

Thanks Neil! I tweaked your code a bit into my function and the arrow is showing up on hover, but it's appearing above the text and pushing the text down rather than appearing to the left of the text and pushing it all a bit to the right to compensate. I tried putting in align=left into the img but it makes the arrow appear to the far left of the space for the text rather than next to each link that is hovered. Any clue as to how I would make the arrow appear to the left of each link when it's hovered and push the text to the right rather than on top? — Cloudy, Jan 16 '11 at 20:32

score 0 · Accepted Answer · edited Feb 18 '17 at 20:48

'Cloudy',

Below should give you what you are asking for. It is a bit more complicated than my earlier code as it tries to centre the text, both vertically and horizontally. Let me know how you get on with it.

The CSS, jQuery Javascript and HTML are:

<style>
#nav1 {
    float: none;
    padding: 0;
    margin: 0;
}
#nav1 div {
    float: left;
    position: relative;
    padding: 4px;
    height: 36px;
    border: 2px solid #000;
}
#nav1 div p {
    position: absolute; 
    right: 4px;   
    padding: 0 4px;
    text-align: center;
    top: 50%;
    font-size: 14px;
    margin-top: -7px;  /* negative and half the font size */
}
.clear {clear: both;}
</style>

<!--  Below is the Javascript code  -->
<!--  ############################  -->

<script type="text/javascript">
$(document).ready(function(){
</script>

$('#nav1 div').each(function(){
    var content_width = 200, arrow_width = 32;
    $('p', this).css({width: content_width, left: 0});
    $(this).css({width: content_width});
    $(this).hover(
        function(){
            var $this = $(this);
            var new_width = $this.width() + arrow_width;
            $this.css({backgroundColor: "#F00", color: "#00F", width: new_width})
                 .prepend('<img src="../images/arrow.png" alt="" />');
            $('p', this).css({left: arrow_width});
        }
        ,
        function(){
            var $this = $(this);
            var new_width = $this.width() - arrow_width;
            $('img', this).remove()[0];
            $this.css({backgroundColor: "#0F0", color: "#F00", width: new_width});
            $('p', this).css({left: 0});
        }
    );
});

<!--  Below is the HTML  -->
<!--  #################  -->

<div id="nav1">
<a href="../javascipt/slimbox2.js"      ><div><p>"Minified" slimbox.js</p></div></a>
<a href="../javascript/slimbox2_full.js"><div><p>slimbox2_full.js     </p></div></a>
<a href="../css/slimbox2.css"           ><div><p>slimbox2.css         </p></div></a>
</div>
<div class="clear"></div>

@aliencity: I approved your edit, but, for future reference, I think it would've been preferable to point out the typo in a comment, and let Neil edit his answer himself. — isekaijin, Feb 18 '17 at 19:59

Neil · Answer 4 · 2011-01-17T17:36:36.193

This will be my last word on this subject. If you are not averse to using a table instead of divs then there is a much simpler solution. The CSS assumes an image 32px high. You will have to alter it if your arrow image is a different height.

Regards Neil

----------------------------------CSS --------------------

#nav2, #nav2 tbody, #nav2 tr, #nav2 td{height: 32px;}
#nav2 td{vertical-align: middle; border: 2px solid #000;  margin: 0;}
#nav2 img {display: none; height: 32px; margin: 0; padding: 0; border:0;}
#nav2 div {
              float: left;
              height: 32px;
              margin: 0;
              padding: 0;
              border: 0;
              color: #F00;
              background-color: #0F0;
          }
#nav2 p {
    float: left;
    font-size: 14px;
    padding: 9px 4px 0 4px;  /*  9px = (32-14)/2   */
    height: 23px;            /* 23px = (32-9)      */
    margin: 0;
    border: 0;
    color: #F00;
    background-color: #0F0;
}

-----------------------------  jQuery javascript --------------------

$('#nav2 a').each(function(){
    $(this).hover(
        function(){
                    $('img',    this).fadeIn();
                    $('div, p', this).css({backgroundColor: "#F00", color: "#00F"});
        }
        ,
        function(){
                    $('img',    this).fadeOut();
                    $('div, p', this).css({backgroundColor: "#0F0", color: "#F00"});
        }
    );
});

---------------------------------  HTML   ---------------------------

<table id="nav2">
    <tr>
        <td><a href="../example1.html"><div><img src="../images/arrow.png" alt=""></div><p>Link 1</p></a></td>
        <td><a href="../example2.html"><div><img src="../images/arrow.png" alt=""></div><p>Link 2</p></a></td>
        <td><a href="../example3.html"><div><img src="../images/arrow.png" alt=""></div><p>Link 3</p></a></td>
    </tr>
</table>

Make an image appear on hover with Jquery

4 Answers4

Linked