0

I wanted to hide some rating text on the page until I hovered over it.

I am novice css + javascript coder and I was testing some css override code (eg using a chrome browser with stylebot extension) when viewing a web, which means you can only modify css. I did not find a way to do this with css visibility attribute but using opacity works fine see code shown below. I could not find anything that explains why css visibility will not change when I hover over the area. Just curious if anyone can explain it. Is it possible to do with visibility in only css?

If I were doing visibility changes via javascript would this behavior be identical as pure css? I saw few questions on stackoverflow.com asking what looked like similar questions but did follow them. Just curious.

(Edit: I first tried display then tried visibility. I realize space is kept with visibility but is hover disabled?).

<!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>
Skip R
  • 383
  • 3
  • 14

1 Answers1

2

See the specs:

visibility: hidden The element box is invisible (not drawn), but still affects layout as normal. Descendants of the element will be visible if they have visibility set to visible. The element cannot receive focus (such as when navigating through tab indexes).

display: none Lets you turn off the display of an element; when you use none, all descendant elements also have their display turned off. The document is rendered as though the element doesn't exist in the document tree.

Stickers
  • 75,527
  • 23
  • 147
  • 186
  • thanks and further reading confirmed that https://stackoverflow.com/questions/272360/does-opacity0-have-exactly-the-same-effect-as-visibilityhidden – Skip R Dec 03 '17 at 15:59