鼠标悬停/鼠标离开：第三张图像定位和切换打开和关闭

Question

在这个 JSFiddle 中，我正在尝试将鼠标悬停在 image1 上，它会更改为 image2 并出现一个图标图像，其中还包含一个可单击的链接。我无法让这个小图标图像（+链接）在鼠标关闭时消失，而是在每次鼠标悬停时不断添加更多相同的图标图像（+链接）（我知道这是因为我在 jquery 中有 .after()），但是有什么东西可以做一个简单的鼠标悬停/鼠标离开吗？

是否还有一种方法可以使用 px 将此图标图像定位在页面上主要图像 1/2 周围的任何位置？

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

这就是你所追求的吗？

编辑：更新了这个 jsfiddle 链接

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;
}