(testing in chrome)
in below css, i'm trying toggle visibility of p-tag when mouse hovers on it. it's hidden becomes visible on hover yellow highlight.
p { visibility: hidden; } p:hover { background-color: yellow; text-decoration: overline; visibility: visible; } but isn't working; p element hidden. verified if remove first definition, hover works, need hide of time.
i'd suggest toggling opacity property instead.
p { opacity: 0; } p:hover { background-color: yellow; text-decoration: overline; opacity: 1; }<p>lorem ipsum dolor sit amet, consectetur adipiscing elit. nam accumsan, orci ut posuere aliquet, libero erat vestibulum ligula, nec eleifend sapien nunc eu leo. mauris ligula sapien, posuere eu ligula et, tincidunt pharetra velit. pellentesque volutpat elit sed mollis lacinia. donec nunc diam, viverra vel sapien non, dictum faucibus nibh. donec dictum nec diam non sagittis. quisque eget arcu et nunc lobortis accumsan vitae vel urna. vivamus semper mollis auctor. donec tempus, lectus quis maximus gravida, arcu lorem sollicitudin elit, nec sollicitudin sem neque felis. pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. suspendisse vehicula, nibh vel euismod fringilla, mi lorem luctus dui, viverra efficitur diam sapien sit amet mi. maecenas sed laoreet mauris. nunc sodales, mi eu vulputate ullamcorper, ligula augue imperdiet massa, vitae fringilla tellus lorem id dui. in dapibus arcu nec felis porttitor varius.</p>in doing so, element still consume same amount of space when isn't visible. in other words, hidden text continue behave text hidden visibility: hidden.
