CODEWITHSUNDEEP
jqueryhtmlcsshoverimage
user1087834
user1087834

Reputation: 25

Want to have image rollover (1st hover state) to hover with background image in 2nd hover state

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

Upvotes: 1

Views: 715

Answers (2)

ptriek
ptriek

Reputation: 9286

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

Upvotes: 1

user1087018
user1087018

Reputation:

instead of using toggleClass. have you tried $('[element]').show() and $('[element]').hide() ? or alternatively you can change the css from

display:none;

to

display:block;

Hope this will help

Upvotes: 1

Related Questions