keithclark / selectivizr

selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8.
1.71k stars 247 forks source link

Hover is disabled for inserted elements #32

Open kylemacfarlane opened 12 years ago

kylemacfarlane commented 12 years ago

Hover doesn't work on elements inserted after Selectivizr has run. Deleting the whole hover case fixed the issue for my circumstances but is obviously not the proper solution.

You can repeat the issue by using IE9 in IE7/8 modes and the following files. "Boo!" will only appear in the original element when Selectivizr is included.

EDIT: A hosted example http://dl.dropbox.com/u/17827955/selectivizr-gh32/index.html

style.css:

span {
    visibility: hidden;
}

div:hover span {
    visibility: visible;
}

index.html:

<!doctype html>
<html>
<head>
    <link href="style.css" media="screen, projection" rel="stylesheet" type="text/css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <!-- I could only find a hosted version of 1.0.2, but 1.0.3b has the same problem -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"></script>
</head>
<body>
    <div>Hello <span>Boo!</span></div>
    <a href="#">Add element</a>

    <script>
    $('a').click(function() {
        $('<div>Hello <span>Boo!</span></div>').insertBefore($(this));
    });
    </script>
</body>
</html>
skapadia commented 12 years ago

I'm also experiencing the same issue involving :hover for elements that are dynamically added to the DOM after the page has already loaded. I'm using IE 8 and jQuery 1.5.2 (although not officially supported yet by Selectivzr, in this instance I'm not using jQuery with pseudo-selectors)

thany commented 10 years ago

I'm having this issue too... Still, after two years.

Another example:

.container a:hover { ... } /* works fine */
.container a:before { ... } /* works fine */
.container a:before:hover { ... } /* doesn't work */

Please note that disabling selectivzr makes hover on pseudo-elements work again.

One more example:

.container a:first-child { ... } /* works fine */
.container a:before { ... } /* works fine */
.container a:first-child:before { ... } /* doesn't work */

This really needs fixing, now that IE8 is still around.

zamber commented 10 years ago

Confirmed. @thany, it's still around after 2 years because that's the last time it saw new commits.

Is there any maintainer still alive?