Edit Question - KnowledgeHub

Title Body

Sometimes it appears helpful to make certain page elements only visible on e.g. hovers. An example is stackoverflow's "feedback - Was this post useful to you?"-widget. As those elements might be crucial to the interface, such a show-on-hover-feature should be a progressive enhancement or, in other terms, unobtrusive and degrade gracefully. The usual way appears to be employing javascript, e.g. hiding the elements and making them available when a parent element is hovered. The reason for that choice might be :hover is not support for all elements especially in legacy browsers, thereby forbidding you to hide elements in the first place up to css2. (for a js/jQuery example cf. jquery showing elements on hover ) I wonder if you can achieve such a feature safely* with pure css3, using :not(:hover) and :hover , not affecting older browsers. As far as I can see, the requirement is that every browser supporting :not() must support :hover for all elements. According to the following sources, that appears to be the case http://www.quirksmode.org/css/contents.html http://kimblim.dk/css-tests/selectors/ Example implementation: http://jsfiddle.net/LGQMJ/ What do you think? Any objections or other sources? *by safely I mean the browser should always show all elements as a last resort.

Tags (comma-separated) Cancel