Question

所以基本上我使用jquery来淡化图像并在用户鼠标悬停在图片上时显示文本。这是我的代码。

<html>
<head>
<link rel="stylesheet" href="styles.css"> 
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$( document ).ready(function() {
$("#bd-text").hide();
});

$(function () {

    $("img").mouseover(function() {
        $(this).css('border', "solid 1px #2980b9"); 
        $(this).css('filter', "blur(3px)");
        $("#bd-text").show();
});

$("img").mouseleave(function() {
    $(this).css('border', "none"); 
    $(this).css('filter', "blur(0px)");
    $("#bd-text").hide();
});

});
</script>   
</head>

<body>
<div id="all">

<p style="text-align:center"><img id="borderlands" src="borderlands2.jpg"></p>
<p style="text-align:center"><img id="unknown" src="dev.png"></p>

<p id="bd-text">text that fades in</p>
<p id="dv-text">text that fades in</p>
</div>
</body>
</html>

我遇到的问题是，当文本出现时，它通常会出现在用户的鼠标上，并且由于鼠标现在位于文本上方，因此图像不再褪色。所以我想知道的是，是否有任何方法可以忽略文本，这样即使用户的鼠标悬停在文本上，图像也会保持褪色。

感谢。

Answer 1

CSS属性 pointer-events 允许作者控制特定图形元素在什么情况下（如果有的话）可以成为鼠标事件的目标。只需将此属性添加到{{的样式规则中1}}并将值设置为#bd-text{}：

none

Jquery mouseover与文本和图像

1 个答案: