Question

I've been trying to develop some components that hide themselves unless their parent div is in a hover state. I try to keep my CSS untied to my HTML structure, so I structured my rule like this:

.show-on-hover
{
  display:none;
}
*:hover > .show-on-hover
{
  display:block;
}

I recognize browsers choke on the universal selector at times, and this is the case here. The code works when inside an iFrame (like JSBin), or if I change *:hover to p:hover. However, Chrome refuses to acknowledge the rule on a normal environment.

You can see my code here, but you need to get it out of JSBin and into a file to really see what's going on.

http://jsbin.com/tukeqeco/2/edit

This might sound like a dumb question, and maybe I'm just not seeing something here, but is this part of the spec? If so, where, and why isn't this more well documented? Why does it work in an iframe, but not in a regular part of the browser?

Edit:

I went and changed my code to this:

:not(fakeTag):hover > .show-on-hover
{ 
  display:block;
}

It does exactly what I wanted *:hover > .show-on-hover to do. If there is a limitation in the spec on the * selector or the > selector, why is it there, since I'm able to do silly things like this to get around it?

No correct solution

OTHER TIPS

I feel really stupid now :)

The problem is solved by changing

<!doctype>

to

<!doctype html>

Strange that I didn't notice that until now. How many sites have I developed just using and not realizing that it was invalid?

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top