jQuery blur（）事件在html中不起作用_Jquery_Html_Css_Web

jQuery blur（）事件在html中不起作用

jquery html css web

jQuery blur（）事件在html中不起作用,jquery,html,css,web,Jquery,Html,Css,Web,我想我的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({

我想我的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的模糊，基本上就像使用焦点一样。有人能帮我吗

也许是这样

使用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)
}

如果在超链接中嵌入了图像，则可能会出现以下情况：

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

首先，鼠标悬停状态称为悬停。您可以了解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)'
    });
});

这类事件更好、更容易处理，您甚至可以为它们添加过渡

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函数对应于

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);
}