如何使用css和javascript解除悬停图像的模糊？
我正在为一个学校项目制作一个网站，希望模糊/审查一个图像，并让它在悬停时取消模糊/取消审查该图像，但我遇到了实现这一点的问题。
这是我的密码：
uncensor.onmouseover = function(x){
censor.style.filter = "none"
}
censor.onmouseover = function(x){
censor.style.filter = "blur(5px)"
}
<img onmousehover="uncensor(this)" onmouseout="censor(this)" src="https://s.abcnews.com/images/International/beirut-explosion-13-ap-rc-200805_hpMain_16x9_1600.jpg" id="img-blur">
<img onmousehover="uncensor(this)" onmouseout="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);
}
共有3个答案
没有理由使用JavaScript添加和删除模糊。您只需使用CSS和：hover
css prettyprint-override">.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" />
您可以使用纯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就可以做到这一点。只需使用悬停选择器：
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">-
问题内容： 当用户将鼠标悬停在元素上时，CSS的“悬停状态”将触发： 我们如何使用Javascript将元素设置为“悬停状态”？ 可能吗？ 问题答案： 如果您可以接受使用而不是悬停，则可以使用： 要么 显然，这种方法需要调整CSS使其包含以下样式：
-
问题内容： 有时，我可以选择使用CSS元素：悬停或JavaScript onmouseover来控制页面上html元素的外观。考虑以下情况，其中div包装了输入 我希望输入将鼠标光标悬停在div上时更改背景色。CSS方法是 JavaScript方法是 每种方法的优点和缺点是什么？CSS方法是否适用于大多数Web浏览器？JavaScript比CSS慢吗？ 问题答案： ：hover的问题是IE6仅在链
-
问题内容： 我有一个问题，我将一个图像设置为当鼠标悬停时显示另一个图像，但是第一个图像仍然出现，新的图像不会更改高度和宽度，而会与另一个图像重叠。我对HTML / CSS还是很陌生，所以我可能错过了一些简单的东西。这是代码： 问题答案： 一种解决方案是将第一个图像也用作背景图像，如下所示： 如果您的悬停图片大小不同，则必须将它们设置为：
-
问题内容： 我经常发现自己想调试CSS布局问题，这些问题涉及Java语言引起的DOM更改，以响应悬停事件或由于：hover选择器而导致的不同CSS规则。 通常，我会使用Firebug来检查给我带来麻烦的元素，并查看其CSS属性是什么，以及这些属性来自何处。但是，当涉及到悬停时，这将变得不可能，因为一旦将鼠标移到Firebug面板上，感兴趣的元素就不再悬停，适用的CSS规则也会不同，并且（在这种情况
-
问题内容： 我有一个链接图像。当用户将鼠标悬停在链接上时，我想显示不同的图像。 目前，我正在使用以下代码： 但是我遇到了很多问题：div没有选择CSS规则（当我在Firebug中查看元素时，该元素只是没有显示相关的CSS规则）。 也许这是因为（据我所知）这是无效的HTML：您不能在周围加上。但是，如果切换到该位置，似乎会遇到更大的问题，因为您不能可靠地在span上设置高度和宽度。 帮帮我！我该如何
-
问题内容： 如何更改此确切代码以对鼠标悬停产生悬停效果？ 我尝试遵循其他一些问题和答案，但我无法真正遵循它们。 因此，HTML是： 现在，我要做的是当鼠标悬停在小图像上时更改大尺寸图像。 问题答案： 请尝试以下代码。工作正常 我修改了代码，希望它能稍作延迟。.但是，它不是动画。