Хотите, чтобы при наведении курсора изображения (1-ое состояние наведения) фоновое изображение находилось в 2-м состоянии - PullRequest
Новая
       12

Хотите, чтобы при наведении курсора изображения (1-ое состояние наведения) фоновое изображение находилось в 2-м состоянии

1 голос
/ 08 декабря 2011

У меня есть следующий код, в котором я хочу включить 2-е состояние наведения, примененное к кнопке, которая находится в 1-м состоянии наведения на определенном блоке div - поэтому, когда пользователь наводит курсор на блок div, кнопка появляется в состоянии 1-го наведения затем, когда пользователь наводит указатель мыши на эту кнопку в элементе div или span блока, кнопка переходит в состояние 2-го наведения, чтобы выглядеть ярким.

Может ли это быть легко сделано и выполнено? Я использовал 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');
             }
         );

Ответы [ 2 ]

1 голос
/ 08 декабря 2011

Если я правильно понимаю ваш вопрос, я не думаю, что вам нужен jQuery для достижения вашей цели: http://jsfiddle.net/z6sgY/1/

1 голос
/ 08 декабря 2011

вместо использования toggleClass.Вы пробовали $ ('[element]'). show () и $ ('[element]'). hide ()?Или вы можете изменить CSS с 

display:none;

на 

display:block;

Надеюсь, это поможет

...