时间戳

首页 > 解决方案 > javascript代码禁用了css中的悬停样式，如何使用它们？

javascript - javascript代码禁用了css中的悬停样式，如何使用它们？

问题描述

默认情况下有一些图像，grayscale(1)当您将鼠标悬停在图像上时，它应该变为grayscale(0)，所有这些都在 css 文件中。但我想要当我点击它或当我将鼠标悬停在它上面时，在这两种情况下图像都会得到grayscale(0)但悬停效果不起作用。我试图将代码grayscale(0)放在addEventListener另一个函数中，但它不起作用。

更新：

我添加了 codpen 链接和一行代码。

正如你从一开始就看到的那样，左边的人是有颜色的，因为我正在展示他们的信息。我希望当我将鼠标悬停在其他人身上时，他们会获得彩色主题，而他们的信息已显示的人仍然是彩色的。

关联

showInfo(0);
function showInfo(person) {
    var img, info, names;

        names = document.querySelectorAll('.box h2');
        for (let i = 0; i < names.length; i++) {
            names[i].style.display = 'none';
        }
        names[person].style.display = 'block';
    
        info = document.querySelectorAll('.info p');
        for (let i = 0; i < info.length; i++) {
            info[i].style.display = 'none';
        }
        info[person].style.display = 'block';
    
        img = document.querySelectorAll('.images img');
        for (let i = 0; i < img.length; i++) {
            img[i].style.filter= 'grayscale(1)'; 
        }
        img[person].style.filter= 'grayscale(0)';
    }

标签： javascriptcss

解决方案

我已经更新了你的 showInfo 函数：

function showInfo(person) {
    var img, info, names;

    names = document.querySelectorAll('.box h2');
    for (let i = 0; i < names.length; i++) {
        names[i].style.display = 'none';
    }
    names[person].style.display = 'block';

    info = document.querySelectorAll('.info p');
    for (let i = 0; i < info.length; i++) {
        info[i].style.display = 'none';
    }
    info[person].style.display = 'block';

    img = document.querySelectorAll('.images img');
    for (let i = 0; i < img.length; i++) {
        img[i].style.filter= ''; 
    }
    img[person].style.filter= 'grayscale(0)';
}
showInfo(0);

更改非常小，可以让您获得所需的行为：

for (let i = 0; i < img.length; i++) {
    img[i].style.filter= ''; 
}

推荐阅读