Question

I have these following code in which I want to enable 2nd hover state applied to the button that is placed on 1st hover state on the certain box div – so when a user hovers a box div, the button appears in 1st hover state, then when the user hovers that button in the box div or span element, the button changes in 2nd hover state to be bright in appearance.

Can this be possibly done and accomplished easily? I have used Jquery and DOM but it did not work.

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

If I understand your question correctly, I don’t think you need jQuery to achieve your goal: http://jsfiddle.net/z6sgY/1/