2

ここに初めて投稿するので、マークアップの問題がある場合はご容赦ください。私は投稿を書くためのSOFフレームワークに慣れていません。

ホバー時に自分のサイトでソーシャルアイコンをバウンスさせようとしています。jQuery UIからコードを取得してテストし、いくつかの小さな編集を行いましたが、ページに二重の画像が表示されるという問題が発生しています。マウスを画像の上に置くとバウンドしますが、バウンドする画像の後ろから複製が表示されます。バウンスセッション中にマウスを離してアイコンにすばやく戻ると、正しくバウンスし、画像が後ろに隠れます。

では、どうすれば画像を一貫して背後に隠すように強制できますか？

<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
div { width: 32px; height: 32px; background-repeat:no-repeat; background-image: url(http://www.liquidclubs.com/assets/img/icon-fb.png); border: position: relative; }
</style>
<script>
$(document).ready(function() {

$("div").mouseenter(function () {
  $(this).effect("bounce", { times:3 }, 350);
});

});
</script>
</head>
<br><br><div></div>
</body>
</html>
4

1 に答える 1

2

画像を背景画像として定義しているためです。

http://jsfiddle.net/UQTY2/33/

<div> <img src="http://www.liquidclubs.com/assets/img/icon-fb.png" /></div>

div {
    width: 32px;
    height: 32px;
}
于 2013-03-24T06:31:31.213 に答える