css - 没有任何运气：悬停，无论是使用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>

它只是停留在 mouseenter 动画上。所以我尝试了css方法：

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

不做杰克。:耸肩:

Answer 1

纳米，我放弃了。我让鼠标事件起作用的唯一方法是将它直接放在元素中（onmouseup：onmousedown：等...）。我确实得到了 a:hover 的工作，但没有办法在不剪掉 ie9 及以下的情况下对其进行动画处理，所以这是不可能的。至少有一个解决方案，不感谢jquery。

Answer 2

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

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

Answer 3

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

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