div hover事件

Posted 2023-05-13

<style>
li:hoverbackground-color:rgba(77,77,77,0.6);
</style>
<li></li>
<li></li>
这样写，用手机访问点击li之后背景色变了，但是不还原啊，这个怎么做？想做成微信个人信息那样的点击变色效果

手机是触摸不支持css的hover经过效果，你用jquery的click点击做效果吧。 参考技术A li:visited设置下 访问后的颜色跟之前的相同就可以了。 参考技术B 手机是没有hover事件的

jquery hover事件只触发一次动画

最近工作时遇到个关于动画的问题，如下：

    $("div").hover(
    function() {
    $(this).animate({"margin-top":"100px"},1000);
    }, function() {
    $(this).animate({"margin-top":"200px"},1000);
    });

看代码就是一个简单的鼠标滑过的动画而已，但是当我测试的时候发现，当我发神经似的来回滑动时，事件就被触发了多次，动画也就重复了多次，怎么才能不重复出现，即动画过程中，鼠标滑过这个div，不会触发该事件那？

带着疑问，google之，

发现，原来为元素绑定hover事件之后，如果光标移入移出的速度太快，导致移入的动画还没执行完，就移出光标，则移出的动画效果就会被放到队列，等移入的动画完成后在执行。因此如果光标的移入移出速度太快，就会导致动画效果与移动光标不一致，出现重复出现的情况。

而解决办法有两种：

1、你可以使用jq的stop方法：

$(div).stop(false, true).animate({‘margin-top‘:‘100px‘},1000);

如果stop()的第一个参数为true，表示立即清除当前的动画队列，默认为fx；如果第二个参数为true，表示立即将当前正在执行的动画置为它的结束状态。

延伸：（看来我真的得好好看看jq的api了）

停止元素的动画：stop([cleanQueue, gotoEnd]):第一个参数代表是否要清空未执行完的动画队列，第二个参数代表是否直接将正在执行的动画跳转到末状态。（可缺省）。

（1）无参数stop()：立即停止当前的动画，如果接下来还有动画则以当前状态开始接下来的动画。

（2）stop(false, true) : 当前的动画直接达到末状态。

（3）stop(true, true) : 当前的动画直接达到末状态并清空当前对象的动画队列。

注意：jQuery只能设置正在执行的动画的最终状态，不能直接达到未执行动画的最终状态。

2、执行动画前判断一下：

        if (!$(obj).is(‘:animated‘)) {
        // to do something
        }

3、延迟

var $v_show = $(".opp-header-bg");
$(".opp-header-container").hover(function(){
   $v_show.slideDown(50);
},function(){
    setTimeout(function(){ $v_show.slideUp(50)} , 300 );
});