css - 使用 jquery 或 css 对 :hover, 没有任何运气

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>

不做 jack 。 :耸肩:

Answer 1

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

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