Question

当用户将鼠标悬停在我的一个链接上但没有任何反应时，我希望我的img模糊不清。我有以下代码：

<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的工作知识（仍在学习Web开发）...但我尝试在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中不起作用

3 个答案: