jQuery blur（）事件不能在html中工作

我想讓我的img在用戶懸停在我的一個鏈接上時模糊，但沒有任何反應。我有以下代碼：jQuery blur（）事件不能在html中工作

<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（））任何人都可以幫助我嗎？ :)

來源

2015-03-25 Justin Walker

也許這樣？

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

來源

2015-03-25 02:16:53 bekt

如果您有嵌入在超鏈接的圖像，你可能有東西，看起來像：

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

來源

2015-03-25 02:37:26

首先，mouseover狀態被稱爲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。

來源

2015-03-25 02:43:17 rec

jQuery blur（）事件不能在html中工作

回答

相關問題