带有文本和图像的Jquery鼠标悬停_Jquery_Html

带有文本和图像的Jquery鼠标悬停

jquery html

带有文本和图像的Jquery鼠标悬停,jquery,html,Jquery,Html,因此，基本上我使用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() { $

因此，基本上我使用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>


$（文档）.ready（函数（）{
$（“#bd text”）.hide（）；
});
$（函数（）{
$（“img”）.mouseover（函数（）{
$（this.css（'border'，“solid 1px#2980b9”）；
$（this.css（'filter'，“blur（3px）”）；
$（“#bd text”）.show（）；
});
$（“img”）.mouseleave（函数（）{
$（this.css（'border'，'none'）；
$（this.css（'filter'，“blur（0px）”）；
$（“#bd text”）.hide（）；
});
});


淡入淡出的文本
淡入淡出的文本

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

谢谢。

CSS属性指针事件允许作者控制特定图形元素在何种情况下（如果有）会成为鼠标事件的目标。只需将此属性添加到

#bd text{}

的样式规则中，并将值设置为

无

：

<html>
<head>
    <link rel="stylesheet" href="styles.css">
    <title title="test"></title>
    <style type="text/css">
        #bd-text {
            position: absolute;
            color: #fff;
            top: 33%;
            width: 100%;
            text-align: center;
            font-size: 20px;
            pointer-events: none;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script>
        $(function () {

            $("#bd-text").hide();

            $("img").mouseover(function () {
                $(this).css('border', "solid 1px #2980b9");
                $(this).css('filter', "blur(5px)");
                $("#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="/Images/image1.jpg"></p>
        <p style="text-align:center"><img id="unknown" src="Images/image2.jpg"></p>
        <p id="bd-text">text that fades in</p>
        <p id="dv-text">text that fades in</p>
    </div>
</body>
</html>


#bd文本{
位置：绝对位置；
颜色：#fff；
最高：33%；
宽度：100%；
文本对齐：居中；
字体大小：20px；
指针事件：无；
}
$（函数（）{
$（“#bd text”）.hide（）；
$（“img”）.mouseover（函数（）{
$（this.css（'border'，“solid 1px#2980b9”）；
$（this.css（'filter'，“blur（5px）”）；
$（“#bd text”）.show（）；
});
$（“img”）.mouseleave（函数（）{
$（this.css（'border'，'none'）；
$（this.css（'filter'，“blur（0px）”）；
$（“#bd text”）.hide（）；
});
});


淡入淡出的文本
淡入淡出的文本

CSS属性指针事件允许作者控制特定图形元素在何种情况下（如果有）可以成为鼠标事件的目标。只需将此属性添加到

#bd text{}

的样式规则中，并将值设置为

无

：

<html>
<head>
    <link rel="stylesheet" href="styles.css">
    <title title="test"></title>
    <style type="text/css">
        #bd-text {
            position: absolute;
            color: #fff;
            top: 33%;
            width: 100%;
            text-align: center;
            font-size: 20px;
            pointer-events: none;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script>
        $(function () {

            $("#bd-text").hide();

            $("img").mouseover(function () {
                $(this).css('border', "solid 1px #2980b9");
                $(this).css('filter', "blur(5px)");
                $("#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="/Images/image1.jpg"></p>
        <p style="text-align:center"><img id="unknown" src="Images/image2.jpg"></p>
        <p id="bd-text">text that fades in</p>
        <p id="dv-text">text that fades in</p>
    </div>
</body>
</html>


#bd文本{
位置：绝对位置；
颜色：#fff；
最高：33%；
宽度：100%；
文本对齐：居中；
字体大小：20px；
指针事件：无；
}
$（函数（）{
$（“#bd text”）.hide（）；
$（“img”）.mouseover（函数（）{
$（this.css（'border'，“solid 1px#2980b9”）；
$（this.css（'filter'，“blur（5px）”）；
$（“#bd text”）.show（）；
});
$（“img”）.mouseleave（函数（）{
$（this.css（'border'，'none'）；
$（this.css（'filter'，“blur（0px）”）；
$（“#bd text”）.hide（）；
});
});


淡入淡出的文本
淡入淡出的文本

您好，欢迎使用SO，请整理您的代码并使其可编译。另外，您可以添加HTML以使示例更清晰吗？请添加CSS代码：）添加CSS

指针事件：无解决此问题？注意：$（文档）.ready（function（）{
等于$（function（）{
）。第二个就是shorthand@Tico是的。您好，欢迎使用SO，请整理您的代码并使其可编译。另外，您可以添加HTML以使示例更清晰吗？请添加CSS代码：）添加CSS指针事件：无；
是否可以解决此问题？注意：$（文档）.ready（函数（）{
等于$（函数（）{
）。第二个就是shorthand@Tico是的。