:hover style remains when leaving <li> horizontally
Hello.
I'm trying to apply background gradients to a list and its list items. The hover style breaks with CSS3PIE, however, as PIE will not remove a style from a list item's child elements when the list item is left via the left or right edges.
Tested with CSS3PIE version: 1.0beta5
Tested with IE version: 9 (native), 8 (IETester), 7 (IETester)
Reproducible: Always (inconsistently for block-type children, though)
Steps to reproduce:- Make a document containing an <ul> with at least one <li> containing a child element
- Apply a -pie-background to the child element when the <li> is hovered
- Hover over the <li>
- Leave the <li> via the left or right edge
Expected behavior: The hover style is removed
Actual behavior: The hover style is not always removed
The following code will produce the error and illustrates that the error occurs with both inline and block children.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS3PIE test case</title>
<style type="text/css">
li,
a,
span,
p
{
behavior: url("PIE.htc");
border: 1px solid black; /* to make finding the edges easier */
width: 5em; /* to make testing the p easier */
padding: 1em; /* the p error seems to be dependent on size */
}
li
{
border: none;
}
li:hover > *
{
-pie-background: linear-gradient(top, #eeeeee 0%,#aaaaaa 100%);
}
</style>
</head>
<body>
<ul>
<li><a>Item 1</a></li>
<li><span>Item 2</span></li>
<li><p>Item 3</p></li>
</ul>
</body>
</html>
Forums
