使用:hover没有任何运气，无论是jquery还是css

Question

似乎都不适合我。从查询开始：

<script>
$(function() {
$("#button1").hover(function() {
$("#button1").animate({opacity: 0.5}, 500);
});
});
</script>

这会导致不透明度下移，但不会在鼠标离开时恢复。Jquerys悬停页面说要放一个这样的进出动作：

.hover（ handlerIn（eventObject）， handlerOut（eventObject） ）

因此，当我这样做时，它只会在鼠标输入时和在鼠标输出时再次给我两个动画：

<script>
$(function() {
$("#button1").hover(function() {
$("#button1").animate({opacity: 0.5}, 500),
    $("#button1").animate({opacity: 1}, 500);
});
});
</script>

所以我放弃了，并尝试了mouseenter/mouseleave组合：

<script>
$(function() {
$("#button1").mouseenter(function() {
$("#button1").animate({opacity: 0.5}, 500); 
});
("#button1").mouseleave(function() {
$("#button1").animate({opacity: 1}, 500);
});
});

</script>

它只是粘在鼠标输入动画上。所以我尝试了 css 方法：

<style>
a:hover {
opacity: 0.5;
}
</style>
<div>
<a id="button1" ><img src="Assets/button.png"></a>
</div>

不做千斤顶。 ：耸耸肩：

Answer 1

尝试在单独的函数中传递悬停处理程序，如下所示：

$(function() {
    $("#button1").hover(function() {
        $("#button1").animate({
            opacity: 0.5
        }, 500);
    }, function() {
        $("#button1").animate({
            opacity: 1
        }, 500)
    });
});​

Answer 2

我不使用 jQuery，但您提供的 CSS 示例非常适合我。我只是从示例中复制了代码，并将图像与我自己的图像交换。

考虑检查您的浏览器（其版本）是否完全支持不透明度。我正在使用火狐 12.0

Answer 3

nm，我放弃了。我让鼠标事件工作的唯一方法是将其直接放在元素中（onmouseup：onmousedown：等等）。我确实终于让 a：hover 工作了，但是如果不剪掉 ie9 及更低版本就无法对其进行动画处理，所以这是不可能的。至少有一个解决方案，不感谢jquery。