0

この 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">')

});

 });
4

1 に答える 1

0

これはあなたが求めているものですか？

編集:この 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;
}
于 2013-02-04T03:24:04.350 に答える