Question

我有以下代码，其中我想启用第二个悬停状态应用于某个盒子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');
             }
         );

Answer 1

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

更改CSS

display:none;

到

display:block;

希望这会有所帮助

Answer 2

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

想要在第2个悬停状态下将图像翻转（第1个悬停状态）悬停在背景图像上

2 个答案: