Closed ariellepollock closed 9 months ago
in this block of code, shouldn't that second class(.hintMessage
) be before the :hover
?
.shadow:hover .hintMessage {
visibility: visible;
opacity: 1;
}
Wait... but don't I want the parent before the child? The flip still didn't fix it tho
share the code with the flip
and, you're trying to add the hover to both of these classes, correct?
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;
}
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
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;
}
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)
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