Question

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

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

这会导致不透明度向下移动，但它不会在mouseleave上恢复。 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

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

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

Answer 2

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

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

Answer 3

nm，我放弃了。让鼠标事件工作的唯一方法是直接将它放在元素中（onmouseup：onmousedown：etc ...）。我确实得到了：最后徘徊去工作，但没有办法动画它而不切断ie9及以下，所以这是不可能的。至少是一个解决方案，不用谢谢jquery。

没有任何运气：使用jquery或css悬停

3 个答案: