IE7, IE8 Issue with jQuery .clone()

Question

On my page I have developed a horizontal scrolling carousel. On page load I am cloning each of the <li>'s and using appendTo() to add them onto the end of the list.

The issue I am having in IE7 and IE8 is as follows: Each of the <a>'s within the <li> has a css :hover/:focus which displays an inner <div>. In the aforementioned browsers when I hover over the cloned element, it shows the hover state, but on the element it has been cloned from rather than the new element!

Any idea what could be causing this?

My markup is as follows:

<ul class="people-carousel">
    <li>
        <a style="background-image: url(/images/placeholder/pc-1.jpg)" href="#">
            <div class="hover">
                <span class="pc-name">Name here</span>
                <span class="pc-position">Position</span>
                <span class="pc-view">View profile</span>
            </div>
        </a>
    </li>
    <li>
        <a style="background-image: url(/images/placeholder/pc-1.jpg)" href="#">
            <div class="hover">
                <span class="pc-name">Name here</span>
                <span class="pc-position">Position</span>
                <span class="pc-view">View profile</span>
            </div>
        </a>
    </li>
    <li>
        <a style="background-image: url(/images/placeholder/pc-1.jpg)" href="#">
            <div class="hover">
                <span class="pc-name">Name here</span>
                <span class="pc-position">Position</span>
                <span class="pc-view">View profile</span>
            </div>
        </a>
    </li>
</ul><!-- /.people-carousel -->

And my jQuery is basically the following:

var list = _this.find('.people-carousel');
list.find('li').clone().appendTo(list);

The CSS is just a basic :hover, but is as follows:

/* Default */
.people-carousel .hover {
    position: absolute;
    top:40px;right:0;left:0;
    height: 107px;
    background: #ff6634;
    padding: 18px;
    color: #fff;
    opacity: 0;

    -webkit-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -o-transform-origin: 50% 100%;
    transform-origin: 50% 100%;

    -webkit-transform: scale(.5);
    -moz-transform: scale(.5);
    -ms-transform: scale(.5);
    -o-transform: scale(.5);
    transform: scale(.5);

    -webkit-transition: .1s ease-out;
    -moz-transition: .1s ease-out;
    -ms-transition: .1s ease-out;
    -o-transition: .1s ease-out;
    transition: .1s ease-out;
}

/* Hover */
.people-carousel a:hover .hover, .people-carousel a:focus .hover {
    opacity: 1;
    top: 0;

    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

Rory McCrossan · Accepted Answer · 2013-11-01 11:27:17Z

1

This sounds like another wonderful IE bug with CSS psuedo-selectors. I would suggest hooking up the :hover and :focus events via jQuery instead of CSS. It's backwards semantically, but if you need to support IE7/8 you sometimes have to do stupid things to make it work.

/* Hover */
.people-carousel a.highlight .hover {
    opacity: 1;
    top: 0;

    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

$('.people-carousel')
    .on('focus mouseenter', 'a', function() {
        $(this).addClass('highlight');
    })
    .on('blur mouseleave', 'a', function() {
        $(this).removeClass('highlight');
    });

Note I used delegated event hanlders so that the events will work for any li elements you append dynamically.

answered Nov 1, 2013 at 11:27

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Probocop Over a year ago

Thanks for your answer. That approach did indeed work, but I did a bit more digging into the issue. Turns out it was to do with Selectivizr, so it was copying the original events over to the new elements for IE!

Collectives™ on Stack Overflow

IE7, IE8 Issue with jQuery .clone()

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related