Originally Posted by
dresden_phoenix
Ray,
my question is if it's not only UNWISE but IMPOSINBLE to change display: modes on :hover in some browsers or if it is part of standard CSS behaviour?
Hi,
It's not impossible, and css does allow it. Your not going to find anything in the specs that will say that changing display values should be supported as normal behavior. I would see that as a gray area that browsers can render as they see fit.
As you noticed FF was ok with it where Safari was not, that is the reason why it is not recommended.
I was playing around with some more scenarios and found some other strange behavior in Safari.
Safari is ok with this when the display value changes via li:hover - (still not recommended)
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>demo</title>
<style type="text/css">
a {display:inline; background:lime;}
li:hover a {display:block;background:pink; color:red}
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</body>
</html>
This throws Safari in an endless page load after an intial hover -
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>demo</title>
<style type="text/css">
a {display:none;}
li:hover a {display:block;background:pink; color:red}
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</body>
</html>
Bookmarks