希望有图像翻转（第一悬停状态），在第二悬停状态的背景图像悬停

我有这些下面的代码中，我希望启用第二悬停状态下施加到被放置在第一悬停状态的某些按钮box div - 因此，当用户悬停box div时，按钮会出现在第一个悬停状态，然后当用户将该按钮悬停在box 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'); 
      } 
     );

来源

2011-12-08 user1087834

你有没有试着做了'$（“产品跨度”）第一悬停之外hover'，因为我不知道你是否能链是这样！？还有一点建议，当你说'xy不工作'时，描述什么不起作用，为什么！ – Anonymous

嗨Dan @DanSurfrider，谢谢你的评论。关于什么是“不工作”的问题，我的意思是，标签必须始终在div里面那么当标签徘徊，那么元素或类似元素（一个按钮出现上面的影像）将显示在以上该图像，然后再次，当徘徊时，该按钮将更改为其自己的悬停状态 - 换句话说就是在按钮中变为明亮的颜色。我假设这个按钮可以被包含在图片上方最高zindex的span元素中（嵌入在.product div中）。 – user1087834

@DanSurfrider一两件事，我本来想在WordPress的电子商务使用的代码如上所以这就是为什么需要jQuery来添加范围，并为动态生成并插入到“页”每个产品图像按钮悬停。因为每次我在wp电子商务中添加新产品时，产品图像都会出现在页面的标签中，但我不确定如何在产品图像的第一个悬停中将按钮更改为其自己的按钮状态（在第2个徘徊）。 – user1087834

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

display:none;

到

display:block;

希望更改CSS，这将有助于

来源

2011-12-08 14:00:18

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

来源

2011-12-08 14:08:11 ptriek

感谢ptriek。您在理解问题时几乎是正确的，但是，我希望产品悬停的是产品div需要在里面有标签，而不是其中的任何div。这是因为我在哪里图片是动态生成的，当我增加了新的产品，使代码看起来像这样加载WordPress的电子商务工作：

但我相信，如果我能正确绝对位置应用标签，可以在相同的结果取得成就？ – user1087834

我只是用div的快速演示，您可以确实是由IMG更换内部的div - 应该工作完全一样.. – ptriek

谢谢ptriek，你在提供演示所做的是对我来说非常有帮助，我不得不修改代码和CSS一一点点实现我的目标。谢谢！ – user1087834

希望有图像翻转（第一悬停状态），在第二悬停状态的背景图像悬停

回答

相关问题