Why isn’t CSS visibility working?

by

You cannot hover over a hidden element. One solution is to nest the element inside another container:

CSS:

.spoiler span {
    visibility: hidden;
}

.spoiler:hover span {
    visibility: visible;
}

HTML:

Spoiler: <span class="spoiler"><span>E.T. phones home.</span></span>

Demo:

http://jsfiddle.net/DBXuv/

Update

On Chrome, the following can be added:

.spoiler {
    outline: 1px solid transparent;
}

Updated demo: http://jsfiddle.net/DBXuv/148/

More Related Contents:

  1. What is the difference between visibility:hidden and display:none?
  2. What is the difference between the hidden attribute (HTML5) and the display:none rule (CSS)?
  3. How to create one vertical column in between rows in Flexbox [closed]
  4. How can i make this wave effect on both bottom and top
  5. How to apply a CSS filter to a background image
  6. Why is a flex item limited to parent size?
  7. What does !important mean in CSS?
  8. Transparent text cut out of background
  9. CSS3 selector :first-of-type with class name?
  10. Remove blue border from css custom-styled button in Chrome
  11. How do I use /deep/ or >>> or ::v-deep in Vue.js?
  12. React.js inline style best practices [closed]
  13. Internet Explorer’s CSS rules limits
  14. Pure CSS checkbox image replacement
  15. CSS: Set a background color which is 50% of the width of the window
  16. Does element width include padding?
  17. Add line break to ::after or ::before pseudo-element content
  18. Cols, colgroups and css “:hover” pseudoclass
  19. Add CSS cursor property when using “pointer-events: none”
  20. Padding-bottom/top in flexbox layout
  21. How can I prevent CSS gradient banding?
  22. Why adding version number to CSS file path?
  23. How to display and hide a div with CSS?
  24. Can I define a class name on paragraph using Markdown?
  25. Check scrolling with CSS
  26. Animate CSS background-position with smooth results (sub-pixel animation)
  27. CSS class repetition to increase specificity
  28. Where do the lost pixels go in a percent CSS layout? [duplicate]
  29. Bootstrap 4 – no column wrapping
  30. How to specify table’s height such that a vertical scroll bar appears?

Leave a Comment