I had a challenge to only show some rating text on my website when I hovered over it.
Being new to coding with CSS and JavaScript, I was experimenting with overriding styles using the Stylebot extension in Chrome. I encountered an issue while trying to modify the visibility attribute of an element on hover - it wasn't working as expected. However, changing the opacity worked perfectly. I'm still unsure why the visibility property didn't respond to hovering, so I'm curious if anyone can provide an explanation. Is it possible to achieve this effect using only CSS?
If I were to use JavaScript to manipulate the visibility of elements, would the behavior be the same as with pure CSS? I noticed similar questions on stackoverflow.com but didn't find a clear answer. It's just something that piqued my curiosity.
(Edit: Initially, I attempted to use display instead of visibility, then switched to visibility. I noticed that space is maintained with visibility, but does it disable hover?).
<!DOCTYPE html>
<html>
<head>
<style>
div.mydiv1 {
visibility:hidden;
}
div.mydiv1:hover {
visibility:visible;
}
div.ratingValue {
opacity: 0
}
div.ratingValue:hover {
opacity:1;
}
</style>
</head>
<body>
Opacity:
<div class=ratingValue>
Opacity example
<p />
</div>
Visibility:
<div class=mydiv1>
Visibility example
</div>
</body>
</html>