Question

我在页面顶部有一个导航栏，当某些事件运行时，我有一个弹出大约3秒钟的标题。在此期间，您无法单击基础导航链接。

transition

我尝试过做$(document).on('mouseenter', '.alert-header', function(){ $(this).animate({opacity: 0.2}, 'fast'); }).on('mouseleave', '.alert-header', function(){ $(this).animate({opacity: 1}, 'fast'); });，但指针事件设置为无。所以我尝试使用jquery（假设指针事件只影响css）：

0.2

因此，在完成并测试之后，我得到了与进行css转换相同的结果。

有什么方法可以在鼠标移过标题时淡出标题为{{1}}不透明度，并且能够点击基础链接吗？

Answer 1

好的，我已经找到了办法。首先在css中关闭我要点击的div的指针事件：

.alert-header{
    pointer-events: none;
}

接下来我在移动光标时测试鼠标的Y位置，当标题可见时，如果Y位置小于标题的高度，我会使其淡化，否则我将它淡化为不透明。

var fadeRunning = false;
$(document).on('mousemove', function(e){
    var header = $('.alert-header');
    if(header.is(':visible')){
        var mouseY = e.pageY;
        var height = header.outerHeight();
        if(mouseY <= height && !fadeRunning){
            fadeRunning = true;
            header.animate({opacity: 0.2}, 'fast', function(){fadeRunning=false});
        }else{
            if(!fadeRunning){
                fadeRunning = true;
                header.animate({opacity: 1}, 'fast', function(){fadeRunning=false});
            }
        }
    }else{
        header.css({opacity: 1});
    }
});

点击div并在鼠标悬停时淡出

1 个答案: