Question:

How can I make the text under the picture change when hovering over the picture in JS

Problem

I am making a site for a school project and for some nice interactions, I want to make the text change color when hovering on the picture above the text.

Example:
I have a picture of a pc. When I hover over the pc the name of the pc (which is under the pc) will change color to, for example, purple. If I hover over the name itself then it will also change color. The picture will only change color when hovering over it (already got that covered). Can someone maybe help me with this? Or an inbuild function? I'm kinda new to CSS and still need to learn a lot about it so anything that works will be greatly appreciated.

I have a container and in the container, the div boxes for the picture and the text are both separated
Here is the code:

HTML

</div>

test 1

</div>

test 2

</div>

test 3

</div>

CSS (The important parts are the item class and the containers inside of it. The padding size and display don't matter, only the color needs to change of text. Gave everything just in case)

.item {

display: flex; /* All of the colors don't have to be variables, it's just handier */

flex-direction: row;

justify-content: center;

flex-wrap: wrap;

align-items: center;

width: calc(15% + 60px);

height: 100%;

margin-top: 4%;

}

.container_pc-info {

display: flex;

flex-direction: column;

justify-content: space-evenly;

align-items: flex-start;

height: 12vw;

width: 100%;

margin-top: 8%;

background: black; /* just for testing, don't think it's important */

}

.pc-info {

display: flex;

flex-direction: column;

background-color: var(--color-background-header);

font-size: 1vw;

font-family: "priori-sans", sans-serif;

color: white;

}

.pc-name {

height: 0%;

width: 0%;

color: var(--color-pcInfo-text);

}

.container_pictures {

height: 100%;

width: 100%;

padding: 1.6em;

border: 3px solid var(--color-border-items);

background-color: var(--color-test-background);

transition: all 0.3s ease;

}

.container_pictures:hover {

padding: 0.8em;

background-color: var(--color-border-header-test);

border-bottom: 3px solid var(--color-border-header-test);

}

.Pc-pics {

height: 100%;

width: 100%;

}

I tried searching for ways to make an if statement when the color of the picture changes or when the size of the picture changes, but I couldn't find anything. Then I tried making something with :hover but that didn't work either

.pc-name {

height: 0%;

width: 0%;

color: var(--color-pcInfo-text); /* This is white and it doesn't have to be a variable */

}

.pc-name.container-pictures:hover {

color: aqua; /* This can also be a variable and the color doesn't matter */

/* The variables are in the :root */

}

Solution

The element with class container_pictures and the element with class container_pc-info are siblings so you need to use the + selector. Also, to pick only the fist div with pc-info class you can use the :first-child pseudo-class.

Putting it all together, you need something like this:

.container_pictures:hover + .container_pc-info .pc-info:first-child {

color: red; /* you can change this as you please */

}

>Why highlighted table row using class not working in JavaScript?

>How to rename an object key based on the condition in JavaScript?

>How to sort an array based on another array in Javascript?

>Javascript: Modal not closing with a button