Question

在这个JSFiddle中，我正在尝试对image1进行简单的鼠标操作，它会更改为image2，同时出现一个包含点击链接的图标图像。我无法让这个小图标图像（+链接）在鼠标关闭时消失，而只是在每次鼠标悬停时不断添加更多相同的图标图像（+链接）（我知道这是因为我在jquery中有.after（）），但有什么可以做一个简单的鼠标悬停/鼠标保存吗？

是否还有一种方法可以使用px在页面上的主image1 / 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;
}

Mouseover / Mouseleave：第三次图像定位和切换打开和关闭

1 个答案: