CODEWITHSUNDEEP
javascriptcss
P...
P...

Reputation: 11

Hover style in css is disabled by javascript codes, how to use them?

there is some images with grayscale(1) by default and when you hover on images it should change to grayscale(0), all of this is on css file. but i want when i click on it or when i hover on it, on both situations the image gets grayscale(0) but the hover effect doesn't work. i tried to put the code for grayscale(0) on an addEventListener in another function but it didn't work.

update:

i added codpen link and one line of code.

as you can see from the beginning left person is coloured because i'm showing their info. i want that when i hover on other persons, they get coloured theme while the person that their info is up is still coloured.

link

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

Upvotes: 0

Views: 57

Answers (1)

Junaid Hamza
Junaid Hamza

Reputation: 179

I have updated your showInfo function:

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

The change is very small and that gets you to the required behaviour:

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

Upvotes: 1

Related Questions