想让图像翻转（第一个悬停状态）在第二个悬停状态下悬停在背景图像上答案

【问题标题】：Want to have image rollover (1st hover state) to hover with background image in 2nd hover state想让图像翻转（第一个悬停状态）在第二个悬停状态下悬停在背景图像上
【发布时间】：2012-01-15 22:34:59
【问题描述】：

我有以下代码，我想在其中启用第二悬停状态应用于位于某个框 div 上的第一个悬停状态的按钮 - 所以当用户悬停框 div 时，按钮出现在第一个悬停状态，然后当用户将该按钮悬停在框 div 或 span 元素中时，该按钮会在第二悬停状态下变为明亮的外观。

这可能很容易完成吗？我使用过 Jquery 和 DOM，但它不起作用。

HTML：

<div class="product"><a href="#"><span><img src="images/more-details.png"/></span><img src="images/product.jpg" width="220" height="195" alt="product"/></a></div>

CSS：

.product{width:220px; height:195px; float:left; margin-right:18px;margin-bottom:24px; position:relative; }

.product span{width:220px; height: 195px; position:absolute; visibility:hidden; background: url("images/more-details.png") no-repeat;}

.product span a{width:220px; height: 195px; position:absolute; visibility:hidden; display:block; overflow:hidden; background: url("images/more-details.png") no-repeat;}

.product span a:hover{width:220px; height: 195px; position:absolute; visibility:hidden; display:block; overflow:hidden; background: url("images/more-details-over.png") no-repeat;}

.product span:hover{visibility: visible;}

.product span.show{visibility: visible;}.product span.hide{visibility: hidden;}

.product span img{visibility: hidden;}

.product span img showimg{visibility: visible;}
.product span img hideimg{visibility: hidden;}

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');
             }
         );

【问题讨论】：

您是否尝试在第一次悬停之外执行$("product span").hover，因为我不确定您是否可以这样链接！？还有一点建议，当你说xy didn't work 时，请描述什么不起作用以及为什么！
嗨丹@DanSurfrider，感谢您的评论。关于什么“不起作用”的问题，我的意思是标签需要始终在 div 内，然后当标签悬停时，然后是元素或类似元素（上面出现的按钮image) 会显示在该图像的上方，然后再次，当悬停时，按钮会更改为自己的悬停状态 - 换句话说，按钮会更改为亮色。我假设这个按钮可以包含在图像上方最高 zindex 的 span 元素中（嵌入在 .product div 中）。
@DanSurfrider 还有一件事，我想在 Wordpress 电子商务中使用上述代码，这就是为什么需要 JQuery 来添加 span 并使按钮悬停在动态生成的每个产品图像上并插入“页面”。因为每次我在 wp ecommerce 中添加新产品时，产品图片都会出现在页面的标记中，但我不确定如何在产品图片的第一次悬停中制作按钮以更改其自己的按钮状态（在第二次悬停）。

标签： jquery html css hover image

【解决方案1】：

如果我正确理解您的问题，我认为您不需要 jQuery 来实现您的目标：http://jsfiddle.net/z6sgY/1/

【讨论】：

感谢 ptriek。您对这个问题的理解几乎是正确的，但是，我在产品悬停中想要的是产品 div 内部需要有一个标签，而不是其中的任何 div。这是因为我正在开发 Wordpress 电子商务，当我添加新产品时，图像是动态生成和加载的，所以代码如下所示：

但我假设如果我可以正确地将标签应用到绝对位置，是否可以达到相同的结果？
我只是使用 div 进行快速演示，您确实可以用 img 替换内部 div - 应该完全一样..
感谢 ptriek，您在提供演示时所做的对我很有帮助，我不得不稍微修改代码和 css 以实现我的目标。谢谢！

【解决方案2】：

而不是使用toggleClass。你试过 $('[element]').show() 和 $('[element]').hide() 吗？或者你可以改变css从

display:none;

到

display:block;

希望这会有所帮助

【讨论】：