Question

大家好我有一个有点奇怪的问题，基本上在这个页面上：

http://www.carbondelight.co.uk

我在由BxSlider（http://bxslider.com/）驱动的无限循环上有6个图像/产品，这个位很简单。

然后我在jQuery中编写了一个函数，当您将鼠标悬停在相应的产品图像上时，该函数会显示产品名称。

我遇到的问题是悬停仅适用于每个循环，并且不会越过下一个循环。例如，如果您查看前面提到的页面，您会注意到循环中的最后一个图像是红色汽车的两个后座，如果您尝试将鼠标悬停在该图像和旁边的船形图像之间，您将会不要改变产品名称。但是如果你将完整的内容移动到下一个循环中，那么所有的jQuery都会再次运行。而对于我的生活，我无法解决这个问题。有没有人有任何想法？

提前谢谢大家。

丹尼尔。

代码在这里。

    $('.newp-hover').mouseenter(function() {
    var imgValue = $(this).attr("name");
    //alert(imgValue);
    $('.newp-pre').hide();
    $('.newp-name').hide();
    $('.' + imgValue).fadeIn('slow');
});

，HTML就在这里

<div id="new-p-con">
    <div class='newp-title textshadow'>NEW PRODUCTS</div><div class='newp-bt-con'><div class="newp-left-btn" id="go-prev2"></div><div class="newp-right-btn" id="go-next2"></div></div>
    <div class="newp-img-con">
                <ul id="slider5">
                        <?php

                        for ( $j = 0 ; $j < $rows ; ++$j )
                        {
                            $row = mysql_fetch_row($result3);
                            $sql4 = "SELECT smlImg FROM imageTable WHERE partID='$row[0]'";
                            $product = performQuery($sql4);
                             //displays the product images
                            echo "<li class='newp-li'><a href='prodview.php?id=$row[0]' class='newp-hover' name='$j'><img src='$image$product[0]' /></a></li>";
                        }
                        ?>
                </ul>
        <div class="newp-name-con">
        <?php
            //finds the first product name
            $showyou = performQuery($sql5);

        for ( $j = 0 ; $j < $rows5 ; ++$j )
        {
            $row2 = mysql_fetch_row($result5);
            //displays the first product name so a name shows when page is loaded
            echo "<p class='none newp-name $j'>$row2[1]</p>";
        }

        ?>

        </div>
    </div>

Answer 1

在您对mouseover事件进行初始绑定后，我感觉滑块正在创建更多元素。由于您使用.mouseover()进行绑定，因此只有在绑定时存在的元素才会触发事件。

如果滑块在您绑定后添加更多内容live event将解决您的问题。它不是绑定到绑定时存在的元素，而是 plus 与选择器匹配的所有未来元素：

$('.newp-hover').live('mouseenter', function() { var imgValue = $(this).attr("name"); //alert(imgValue); $('.newp-pre').hide(); $('.newp-name').hide(); $('.' + imgValue).fadeIn('slow'); });

修改
从jQuery v1.7开始，不推荐使用
.live()。相反，您应该使用委托事件：

$(documents).on('mouseenter', '.newp-hover', function() { var imgValue = $(this).attr("name"); //alert(imgValue); $('.newp-pre').hide(); $('.newp-name').hide(); $('.' + imgValue).fadeIn('slow'); });

jQuery悬停功能无法正常工作＆＃39; BxSlider＆＃39;环

1 个答案: