hover state isn't working

[ariellepollock]

What's the problem you're trying to solve?

I'm trying to have a message display when I hover my cursor over specific images/divs.

Post any code you think might be relevant (one fenced block per file)

.hintMessage {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    background-color: aliceblue;
    color:#011320;
    padding: 10px;
    border-radius: 5px;
}

.shadow {
    width: 5vh;
    z-index: 1;
    display: flex;
    place-self: center;
    position: relative;
}

.shadow img {
    width: 100%;
    object-fit: contain;
}

.shadow:hover .hintMessage {
    visibility: visible;
    opacity: 1;
}

If you see an error message, post it here. If you don't, what unexpected behavior are you seeing?

I don't see an error message

What is your best guess as to the source of the problem?

I had a similar issue with my button but learned (painfully) that it wasn't because Photoshop was open... but now I think it's something in my styling.

What things have you already tried to solve the problem?

I've tried using visibility property, z-index, the order of my code blocks in css, and display property

Paste a link to your repository here

https://github.com/ariellepollock/project-1-game

[timmshinbone]

in this block of code, shouldn't that second class(.hintMessage) be before the :hover?

.shadow:hover .hintMessage {
    visibility: visible;
    opacity: 1;
}

[ariellepollock]

Wait... but don't I want the parent before the child? The flip still didn't fix it tho

[timmshinbone]

share the code with the flip

[timmshinbone]

and, you're trying to add the hover to both of these classes, correct?

[ariellepollock]

I'm trying to add hover to my shadow class and hintMessage is my class name for the message itself

.hintMessage {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    background-color: aliceblue;
    color:#011320;
    padding: 10px;
    border-radius: 5px;
}

.shadow {
    width: 5vh;
    z-index: 1;
    display: flex;
    place-self: center;
    position: relative;
}

.shadow img {
    width: 100%;
    object-fit: contain;
}

.shadow .hintMessage:hover {
    visibility: visible;
    opacity: 1;
}

[ariellepollock]

I tried adding in a hover state for my shadow class for the pointer (just to see if a simpler hover state works) and I can't get that to register either

[ariellepollock]

Hover state now works! I built a function for the "hover" state, a function for the "hide" state and two event listeners using mouseover and mouseout. I also needed to remove the opacity property from my CSS and add a higher z-index to my .shadowCtr . My JS and CSS code blocks with my solves are below

const shadowItms = document.querySelectorAll('.shadow')

// function to show hint message
function hintHover(hintMessage) {
    console.log(hintMessage)
    hintMessage.style.display = 'block'
}

// function to hide hint message
function hintHide(hintMessage) {
    hintMessage.style.display = 'none'
}

// when mouse moves over/off
shadowItms.forEach(item => {
    const hintMessage = item.querySelector('.hintMessage')

    item.addEventListener('mouseover', () => {
        hintHover(hintMessage)
    })

    item.addEventListener('mouseout', () => {
        hintHide(hintMessage)
    })
})

// CSS below

.hintMessage {
    display: none;
    position: absolute;
    background-color: aliceblue;
    color:#011320;
    padding: 10px;
    border-radius: 5px;
    top: -70px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
}