css/jquery 鼠标悬停在 jquery 轮播整圈后不起作用

Question

我有一个圆形 jquery 轮播，它表示​​ 9 天的日历，其中 5 天可见。每一天都以垂直列表示。左右箭头控制 5 天的视图。轮播在所有浏览器中都能正常工作，但有一个例外。一旦你从第 9 列转到第 1 列（以圆形方式），样式就消失了，我的悬停效果也消失了。如果您继续沿相同方向前进，则列将丢失，直到您再次到达第 1 列。例如，如果您从第 9 列进入第 1 列并重复单击“下一个”按钮，则鼠标悬停样式将不再适用，直到您再次到达第 1 列。

长代码 - soz。

我从这里使用 msCarousel： http://www.marghoobsuleman.com/jquery-ms-carousel< /a>

JQUERY HTML

$('p.testSpotImage').wrap('<div class="imageWrapper" />');
$('.imageWrapper').append('<div class="imageBackground"></div>');

// Loop through all the div.thatSetsABackgroundWithAnIcon on your page
$('.imageWrapper').each(function () {
    var tdHeight = $(this).closest('td').height();
    $(this).height(tdHeight);
});
$('.imageWrapper').css("width", "187px");
$('.imageWrapper').css("position", "relative");
$('.imageWrapper').css("top", "0");
$('.imageWrapper').css("clear", "both");
$('.imageWrapper').css("overflow", "hidden");

$('.imageBackground').css({ 'opacity': '0' });
$('.imageBackground').css("background-color", "#a43802");
$('.imageBackground').css("height", "100%");
$('.imageBackground').css("width", "100%");
$('.imageBackground').css("position", "absolute");
$('.imageBackground').css("top", "0");
$('.imageBackground').css("z-index", "1");

$('p.testSpotImage span.dayContentTitle').css({ 'opacity': '0' });

$('.imageWrapper').hover(
function () {
    $(this).find('.imageBackground').stop().fadeTo(200, 1);
    $(this).find('p.testSpotImage span.dayContentTitle').stop().fadeTo(200, 1);
    $('p.testSpot a .dayContentDay', this).css("color", "#fff");
    $('p.testSpot a', this).css("color", "#fff");
},
function () {
    $(this).find('.imageBackground').stop().fadeTo(200, 0);
    $(this).find('p.testSpotImage span.dayContentTitle').stop().fadeTo(200, 0);
    $('p.testSpot a .dayContentDay', this).css("color", "#333");
    $('p.testSpot a', this).css("color", "#333");
});


$('.dayContent').hover(
    function () {
        $(this).stop().animate({ backgroundColor: "#a43802" }, 200);
        $('p.testSpot a .dayContentDay', this).css("color", "#fff");
        $('p.testSpot a', this).css("color", "#fff");
    },
    function () {
        $(this).stop().animate({ backgroundColor: '#ffffff' }, 200);
        $('p.testSpot a .dayContentDay', this).css("color", "#333");
        $('p.testSpot a', this).css("color", "#333");
});

来自一列的

<div class="contentColumnDay2">
    <table cellpadding="0" cellspacing="0" id="columnDay2">
        <tr>
            <td class="calendarHeader">
                <p><span class="dayHeader">Day 2</span><br />October 1, 2011</p>
            </td>
        </tr>
        <span id="ContentPlaceHolder1_labelDay2">
            <tr>
                <td class='dayContentImage' height='174' Width='187' BACKGROUND='/Images/day3_3pm.jpg'>
                    <p class='testSpotImage'>
                        <a href='CalendarMiniDetail.aspx?id=36' rel='shadowbox;height=220;width=330'>
                            <span class='dayContentImageDay'>10</span>AM<br><span class='dayContentTitle'>Fashion Show Debut</span>
                        </a>
                   </p>
               </td>
           </tr>
        </span>
    </table>
</div>

Answer 1

当设置为循环模式时，jQuery Carousel 会出现错误。我认为世界上很大一部分人都在等待更新。

这就是我要做的。似乎旋转木马在第一个周期后正在重建，这将破坏您的悬停事件。相反，请尝试：

$('.dayContent').live({
    mouseenter:
       function()
       {

       },
    mouseleave:
       function()
       {

       }
   }

即使重建，这也会将事件保留在该类上。