JQUERY-在TABLE鼠标上显示隐藏的div

Question

抱歉，您对JQuery的了解很少。 我已经尝试了一天左右的时间来解决这个问题，并且我已经在该站点上搜索了答案，但是无法获得最终的解决方案。

基本上，我在一个非常有限的ECOM网站上工作，该网站提供的开发功能有限，操作和更改元素的唯一方法是使用客户端语言。

基本上，我有一个非常非常脏的html表，它是动态生成的，具有一个表类和每个产品的唯一TR ID。 产品显示在自己的表中。

我想在用户将鼠标悬停在表格上时显示一个隐藏的div。 我尝试了以下方法：

$(document).ready(function () {
    $('table.newspaper-d tr[id^=product_]').hover(function () {
        $(this).find("div.tools").show();
    }, function () {
        $(this).find("div.tools").hide();
    });
});

这在某种程度上有效，但是仅当将鼠标悬停在div上时才有效。

HTML示例的标记是带有类的表，并且每个TR都有唯一的product_行-（已联系ID），即product_134是one，product_324，product_323等

<tbody>
    <tr><td></td></tr>
    <tr>
        <td align="center">
            <table class="newspaper-d" border="0" style="width:250px; float:left;">
                <tbody>
                    <tr class="product_13633">
                        <td>

                            KKKK 

                            <div class="tools" style="display: none;">
                                <div class="add-to-basket-product">
                                    <div class="inner-add-to-basket-product">
                                        <a href="javascript:addToCart(13633);">

                                            ADD TO CART

                                        </a>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td align="center">
                            <table cellspacing="3" cellpadding="3">
                                <tbody>
                                    <tr>
                                        <td width="200">
                                            <div class="product-category-pic" align="center">
                                                <a href="/Descombes-Brouilly-VV-2011-818221/">
                                                    <img class="image-thumb" border="0" src="/product_images/16/3883/thumb-descombes-brouilly-vv-2011.jpg" title="Descombes Brouilly VV 2011" alt="Descombes Brouilly VV 2011"></img>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td align="center">
                            <table cellspacing="0" border="0">
                                <tbody>
                                    <tr>
                                        <td height="36" align="center">


                                           PRODUCT PRODUCT PRODUCT

                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <div class="product-category-details"></div>
                            <div class="add-to-basket-product"></div>
                        </td>
                    </tr>
                </tbody>
            </table>

多谢你们

Answer 1

您的代码实际上可以正常工作。 属性选择器可以是tr[id^=product_]或tr[id^="product_"] ，它们的操作方式没有区别。 我假设您的标记发生了一些事情，使选择工作出乎意料，如果您要发布html示例，我很乐意调整小提琴以反映您的需求。

摆弄一个工作示例： http : //jsfiddle.net/autoboxer/jLnj4gas/2/

欢呼，自动拳击手

编辑：我已经根据您发布的标记更新了小提琴。

Answer 2

如果我理解您的最后评论，我将执行以下操作：

$(document).ready(function () {
    $('table.newspaper-d').hover(function () {
        $(this).find("div.tools").show();
    }, function () {
        $(this).find("div.tools").hide();
    });
});

将鼠标悬停在整个表格上，切换div的可见性。

您可以在这个小提琴中对其进行检查： http : //jsfiddle.net/benjasHu/kLko76sa/

Answer 3

由于TR包含CLASS而不包含ID，因此必须使用“ CLASS”选择器代替“ ID”选择器。

请尝试以下代码：

$(document).ready(function () {
$('table.newspaper-d tr[class^="product_"]').hover(function () {
    $(this).find("div.tools").show();
}, function () {
    $(this).find("div.tools").hide();
});
});

演示场