jQuery blur() 事件在 html 中不起作用

Question

我希望我的 img 在用户将鼠标悬停在我的 link 上时模糊，但没有任何反应。我有以下代码：

<html>
<head>
<meta charset="UTF-8", lang="en">
<title>Tsunamictech Limited</title>
<link rel="stylesheet" type="text/css" href="myCSS1.css"/>
<script>
$("img").css({
                        'filter': blur(0px),
                        '-webkit-filter': blur(0px),
                        '-moz-filter': blur(0px),
                        '-o-filter': blur(0px),
                        '-ms-filter': blur(0px)
                    });
</script>

我对 JQuery 的应用知识很少（仍在学习网络开发）...但我尝试在 CSS3 中使用 .hover 事件，但我无法弄清楚。现在我的照片模糊了 5px，我希望它模糊 0px（本质上就像使用 .focus() ）有人能帮我吗？ :)

Answer 1

大概是这样的？

和JQuery

$(function(){
   $('img').mouseover(function(e){
       e.preventDefault();
       $(this).css({
                        'filter': 'blur(0px)',
                        '-webkit-filter': 'blur(0px)',
                        '-moz-filter': 'blur(0px)',
                        '-o-filter': 'blur(0px)',
                        '-ms-filter': 'blur(0px)'
                    });

   }).mouseout(function(e){
       e.preventDefault();
       $(this).css({
                        'filter': 'blur(5px)',
                        '-webkit-filter': 'blur(5px)',
                        '-moz-filter': 'blur(5px)',
                        '-o-filter': 'blur(5px)',
                        '-ms-filter': 'blur(5px)'
                    });
   });
})

纯粹CSS

img{
   filter: blur(5px),
   -webkit-filter: blur(5px),
   -moz-filter:blur(5px),
   -o-filter:blur(5px),
   -ms-filter:blur(5px)
}

img:hover{
   filter: blur(0px),
   -webkit-filter: blur(0px),
   -moz-filter:blur(0px),
   -o-filter:blur(0px),
   -ms-filter:blur(0px)
}

Answer 2

如果您在超链接中嵌入了图像，则可能看起来像：

<a href="http://someaddress.com/subsite/" class="blur"><img src="http://someaddress.com/images/image1.png"></a>

如果您想 CSS 再试一次，您应该可以执行以下操作：

a.blur img {
    filter: blur(5px);
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
}

a.blur:hover img {
    filter: blur(0);
    -webkit-filter: blur(0);
    -moz-filter: blur(0);
    -o-filter: blur(0);
    -ms-filter: blur(0);
}

Answer 3

首先，鼠标悬停状态被称为hover。您可以 read the documentation 了解如何 jQuery 处理它。

对于您的代码，您可以试试这个：

$('img').hover(function (event) {
   $(this).css({
      'filter': 'blur(0px)',
      '-webkit-filter': 'blur(0px)',
      '-moz-filter': 'blur(0px)',
      '-o-filter': 'blur(0px)',
      '-ms-filter': 'blur(0px)'
  });

}, function (event) {
   $(this).css({
        'filter': 'blur(5px)',
        '-webkit-filter': 'blur(5px)',
        '-moz-filter': 'blur(5px)',
        '-o-filter': 'blur(5px)',
        '-ms-filter': 'blur(5px)'
    });
});

这种事件比 handle with CSS 更好（也更容易），您甚至可以为它们添加过渡。

img {
  filter: blur(5px);
  webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter': blur(5px);
}

img:hover {
  filter: blur(0px);
  webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  -o-filter: blur(0px);
  -ms-filter': blur(0px);
}

注意，jQuery中的blur函数对应于something else。

jQuery blur() 事件在 html 中不起作用

jQuery blur() event not working in html

html

css

jquery

web