Question

In this JSFiddle, I’m trying to do a simple mouseover an image1, it changes to image2 with an icon image appearing also that contains a link to click on. I have trouble making this little icon image(+link) disappear on mouse off and instead it just keeps adding more of the same icon image(+link) with each mouseover(I know it’s because I have .after() in jquery), but is there something to just do a simply mouseover/mouseleave?

Is there also a way to position this icon image using px anywhere you want around the main image1/2 on the page to appear?

http://jsfiddle.net/KpYnD/2/

$(document).ready(function(){
$('.normalClassName').addClass('.normalClassName:hover').mouseover(function(){
$(this).after('<a href="http://www.yahoo.com" /></a><img src="http://www.quarktet.com/Icon-small.jpg">')

});

 });

Answer 1

Is this what you’re after?

EDIT: Updated this jsfiddle link

http://jsfiddle.net/KpYnD/3/

HTML

<div class="normalClassName">
    <a href="http://www.yahoo.com"><img src="http://www.quarktet.com/Icon-small.jpg" /></a>
</div>

Css:

.normalClassName {
    width: 150px;
    height: 150px;
    background: transparent url('http://files.softicons.com/download/web-icons/vector-stylish-weather-icons-by-bartosz-kaszubowski/png/256x256/sun.rays.medium.png') top left no-repeat;
    position:relative;
}

.normalClassName a {
    display:none;
    position:absolute;
    left:50%;
    top:0;
}

.normalClassName:hover {
     background: transparent url('http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Status-security-medium-icon.png') top left no-repeat;
}

.normalClassName:hover a {
    display:block;
}