如何使用 Taildwind 或 ReactJS / TypeScript 在鼠标上取消图像模糊

Question

您好，我尝试了多种解决方案，当我的鼠标放在图像上时，它是不模糊的，但我仍然不知道如何使用模糊MD来进行中等模糊，但是当我尝试将另一个库包裹在其中时，它不起作用

        <img
        src="/assets/images/wall1.png"
        alt="logo"
        className="hidden xl:block h-screen w-1/2 object-cover bg-no-repeat blur-md"
        
        />

我尝试使用其他库，但这些库都不起作用

Answer 1

使用 JavaScript

const img = document.querySelector('img');
img.addEventListener('mouseenter', () => img.style.filter = "blur(10px)");
img.addEventListener('mouseleave', () => img.style.filter = "");

<img src="https://picsum.photos/200/300" />

使用CSS

img.hover-blur:hover {
    filter: blur(10px);
}

<img class="hover-blur" src="https://picsum.photos/200/300" />

Answer 2

尝试添加“blur-none hide:blur-md”

<img src="/assets/images/wall1.png" alt="logo" 
className="hidden xl:block h-screen w-1/2 object-cover bg-no-repeat blur-none hover:blur-md" />