javascript - jQuery UI 弹跳(双图像)

标签 javascript jquery css user-interface bounce

第一次在这里发帖,如果有任何标记问题,请原谅我。我不太习惯SOF框架写帖子。

我正在尝试让一些社交图标在悬停时在我的网站上弹出。我从 jQuery UI 中获取了代码来测试它并进行了一些小的编辑,但是我遇到了页面上可见双图像的问题。当鼠标悬停在图像上时,它会弹起,但从弹起图像后面可以看到重复的图像。如果我在弹跳 session 期间将鼠标移开并快速将鼠标悬停在图标上,它会正确弹跳并将图像隐藏在后面。

那么我怎样才能强制它始终将图像隐藏在后面呢?

<!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>

最佳答案

因为您将图像定义为背景图像。

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

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

div {
    width: 32px;
    height: 32px;
}

关于javascript - jQuery UI 弹跳(双图像),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15595656/

相关文章:

html - 如何在小型设备中将文本保存在框内

JavaScript 图像未绘制到 Canvas

javascript - 我该怎么做才能防止我的网站在一段时间后卡住

javascript - 想要阻止在 jQuery UI AutoComplete 中选择特定项目

javascript - 测试使用 jQuery 的 Angular 指令

html - 如何使容器中的表单居中?使用 flex

html - 继承绝对位置

javascript - Firefox:添加自定义键盘快捷键,例如用 'Saved Logins' 打开 'Show Passwords'

javascript - 如何从 Adob​​e Business Catalyst 中的同一登录页面创建单独的安全区域?

javascript - 上传多张图片预览