Jquery 要使图像滚动（第一个悬停状态）与处于第二个悬停状态的背景图像一起悬停吗

我有以下代码，其中我想启用应用于按钮的第二个悬停状态，该按钮位于某个box div的第一个悬停状态-因此，当用户悬停box div时，该按钮显示在第一个悬停状态，然后当用户将该按钮悬停在box div或span元素中，按钮在第二次悬停状态下变为明亮的外观

这可能很容易做到吗？我使用了Jquery和DOM，但它不起作用

HTML:

JQuery：

$(".product").hover(
            function() {
                 $(this).find('span').toggleClass('show');
            }, 
             function(){ 
                $(this).find('span').toggleClass('hide');
             }
         );
         $(".product span").hover(
            function() {
                 $(this).find('img').toggleClass('showimg');
            }, 
             function(){ 
                $(this).find('img').toggleClass('hideimg');
             }
         );

---

而不是使用toggleClass。您是否尝试过$（'[element]'）.show（）和$（'[element]'）.hide（）？或者，您也可以从

display:none;

到

---

希望这将有助于

如果我正确理解您的问题，我认为您不需要jQuery来实现您的目标：

您是否尝试执行

$（“产品跨度”）。将

悬停在第一次悬停之外，因为我不确定您是否可以通过这种方式链接！？还有一点建议，当你说xy不起作用时，描述什么不起作用以及为什么！你好，Dan@DanSurfrider，谢谢你的评论。关于什么是“不起作用”的问题，我的意思是，当标签悬停时，标签需要始终位于div内，然后一个元素或类似元素（出现在图像上方的按钮）将显示在该图像上方，然后，当标签悬停时，按钮变为其自身的悬停状态-换句话说，按钮中的颜色变为明亮。我假设这个按钮可以包含在span元素中，位于图像上方最高的zindex中（嵌入在.product div中）。@DanSurfrider还有一件事，我想在Wordpress电子商务中使用上面的代码，这就是为什么需要JQuery为动态生成并插入到“页面”中的每个产品图像添加span并使按钮悬停的原因。因为每次我在wp电子商务中添加新产品时，产品图像都会出现在页面的标签中，但我不确定如何使产品图像的第一次悬停中的按钮更改其自身的按钮状态（第二次悬停）。谢谢ptriek。您对这个问题的理解几乎是正确的，但是，我想在产品悬停中看到的是，产品div需要有一个标记，而不是任何div。这是因为我在Wordpress电子商务上工作，当我添加新产品时，图像是动态生成和加载的，所以代码看起来是这样的：但我假设如果我能在绝对位置正确地应用标签，可以达到同样的结果吗？我只是使用divs进行快速演示，你确实可以用img替换内部div-应该工作完全一样..谢谢ptriek，你在提供演示时所做的对我真的很有帮助，我不得不稍微修改代码和css来实现我的目标。谢谢

$(".product").hover(
            function() {
                 $(this).find('span').toggleClass('show');
            }, 
             function(){ 
                $(this).find('span').toggleClass('hide');
             }
         );
         $(".product span").hover(
            function() {
                 $(this).find('img').toggleClass('showimg');
            }, 
             function(){ 
                $(this).find('img').toggleClass('hideimg');
             }
         );

display:none;

display:block;