編輯：感謝所有回答的人！解決方案奏效了，而且很棒。我使用 javascript 的原因是因為我最初尋求幫助的人告訴我使用它，我們都忘記了 css 中存在懸停。再次謝謝你！
我正在為一個學校專案制作一個網站，并希望模糊/審查影像，并在將滑鼠懸停在其上方時對其進行模糊/取消審查，但我遇到了實作這一點的問題。
這是我的代碼：
uncensor.onmouseover = function(x){
censor.style.filter = "none"
}
censor.onmouseover = function(x){
censor.style.filter = "blur(5px)"
}
<img onm ousehover="uncensor(this)" onm ouseout="censor(this)" src="https://s.abcnews.com/images/International/beirut-explosion-13-ap-rc-200805_hpMain_16x9_1600.jpg" id="img-blur">
<img onm ousehover="uncensor(this)" onm ouseout="censor(this)" src="https://media.nature.com/lw800/magazine-assets/d41586-020-02361-x/d41586-020-02361-x_18261790.jpg" id="img-blur">
#img-blur{
filter: blur(5px);
}
uj5u.com熱心網友回復：
你可以在沒有 javascript 的情況下做到這一點。只需使用hover選擇器：
img {
filter: blur(5px);
}
img:hover {
filter: none;
}<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Stack_Overflow_logo.svg/250px-Stack_Overflow_logo.svg.png">uj5u.com熱心網友回復：
您可以使用純 CSS 實作此目的：
.img-blur {
filter: blur(5px);
}
.img-blur:hover {
filter: none;
}<img src="https://s.abcnews.com/images/International/beirut-explosion-13-ap-rc-200805_hpMain_16x9_1600.jpg" class="img-blur">
<img src="https://media.nature.com/lw800/magazine-assets/d41586-020-02361-x/d41586-020-02361-x_18261790.jpg" class="img-blur">但是，如果必須使用 javascript，這里有一個解決方法：您的censor和uncensor函式正在接收懸停在/離開的元素，因此您需要更改x自身的樣式（引數）。還要確保您沒有多次使用相同的 ID - 這會導致意外行為。
const uncensor = function(x) {
x.style.filter = "none"
}
const censor = function(x) {
x.style.filter = "blur(5px)"
}.img-blur {
filter: blur(5px);
}<img onmouseover="uncensor(this)" onmouseout="censor(this)" src="https://s.abcnews.com/images/International/beirut-explosion-13-ap-rc-200805_hpMain_16x9_1600.jpg" class="img-blur">
<img onmouseover="uncensor(this)" onmouseout="censor(this)" src="https://media.nature.com/lw800/magazine-assets/d41586-020-02361-x/d41586-020-02361-x_18261790.jpg" class="img-blur">uj5u.com熱心網友回復：
沒有理由使用 JavaScript 來添加和洗掉模糊。你可以只用 CSS 來做:hover
.img-blur{
filter: blur(5px);
}
.img-blur:hover {
filter: blur(0px);
}<img class="img-blur" src="http://placekitten.com/200/300" />
<img class="img-blur" src="http://placekitten.com/300/300" />如果您想使用 JavaScript 執行此操作，請將 mouseenter 和 mouseleave 添加到影像中。
var imgs = document.querySelectorAll(".img-blur");
imgs.forEach(function (img) {
img.addEventListener("mouseenter", function () {
img.style.filter = 'blur(0px)';
});
img.addEventListener("mouseleave", function () {
img.style.filter = 'blur(5px)';
});
});.img-blur{
filter: blur(5px);
}<img class="img-blur" src="http://placekitten.com/200/300" />
<img class="img-blur" src="http://placekitten.com/300/300" />uj5u.com熱心網友回復：
為什么不在:hovercss中使用？順便說一句，請考慮您不能為頁面中的某些元素放置相同的 id。
.img-blur {
filter: blur(5px);
}
.img-blur:hover {
filter: none;
}<img src="https://fakeimg.pl/350x200/550000/?text=Image1" class="img-blur">
<img src="https://fakeimg.pl/350x200/000000/?text=Image1" class="img-blur">轉載請註明出處，本文鏈接：https://www.uj5u.com/net/378831.html
標籤：javascript html css
上一篇：在遞回中，為什么這是輸出
下一篇：反應地圖功能沒有正確分配鍵