Это my site.Показать изображение при наведении на кнопку

Что я пытаюсь сделать: отображение изображения, когда пользователь наводил на ссылки.

Я определенно делаю какую-то глупую ошибку, но я не совсем уверен, что.

Это то, что я сделал:

HTML

<ul class="nm"> 
    <li><a href="#">Cork</a> 
     <div class="place-image"> 
      <img src="http://classichits.ie/wp-content/uploads/2016/02/cork.png"> 
     </div> 
    </li> 

    .......Remaining li's..... 
</ul>

CSS

.place-image{ 
    display:none; 
} 

div.place-image{ 
    width:326px; 
    height:326px; 
}

Javascript

$('.place-image').hover(
    function() { 
     $('.place-image').fadeIn('slow'); 
    },function() { 
     $('.place-image').fadeOut('slow'); 
    } 
);

Пожалуйста, помогите мне.

источник

2016-02-22 Nauman Tanwir

Не проблема, но почему ваш CSS имеет две записи для одного класса? – nnnnnn

Вы, где привязываете, чтобы накрыть скрытый элемент. Вот почему ваш код не работал. Вы не можете инициировать событие на скрытом элементе.

$('a').hover(
 
    function() { 
 
     $('.place-image').fadeIn('slow'); 
 
    },function() { 
 
     $('.place-image').fadeOut('slow'); 
 
    } 
 
);

.place-image{ 
 
    display:none; 
 
} 
 

 
div.place-image{ 
 
width:326px; 
 
height:326px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<li> 
 
    <a href="#">Cork</a> 
 
    <div class="place-image"><img src="http://classichits.ie/wp-content/uploads/2016/02/cork.png"></div> 
 
</li>

источник

2016-02-22 11:40:34

спасибо, что ответили. Но, uploadpie.com/ehCC2 это то, что происходит. может быть, если вы проверите мой сайт, вы, возможно, сможете это выяснить. Еще раз спасибо –

То, что я пытаюсь сделать, отображает изображение при наведении указателя мыши на ссылки.

делают

<li> 
    <a href="#">Cork</a> 
    <div class="place-image"><img src="http://classichits.ie/wp-content/uploads/2016/02/cork.png"></div> 
</li> 


$('li a').hover(
    function() { 
     $(this).next('.place-image img').fadeIn('slow'); 
    },function() { 
     $(this).next('.place-image img').fadeOut('slow'); 
    } 
);

источник

2016-02-22 11:38:11 gurvinder372

Вам нужно добавить hover событие li как следующее.

$('li').hover(
    function() { 
     $(this).find('.place-image').fadeIn('slow'); 
    }, function() { 
     $(this).find('.place-image').fadeOut('slow'); 
    });

источник

2016-02-22 11:38:34 Azim

Вы просто должны изменить свой Javascript: (В вашем сайте ul имеет класс nm использовать его для целевой конкретной li в ul.)

HTML

<li> 
    <a href="#">Cork</a> 
    <div class="place-image"><img src="http://classichits.ie/wp-content/uploads/2016/02/cork.png"></div> 
</li>

CSS

.place-image{ 
    display:none; 
} 

div.place-image{ 
width:326px; 
height:326px; 
}

Javascript

$("ul.nm > li"). 
    $('li').hover(
     function() { 
      $(this).find('.place-image').fadeIn('slow'); 
     }, function() { 
      $(this).find('.place-image').fadeOut('slow'); 
    });

источник

2016-02-22 11:40:46 Sandeep

еще не повезло .. –

в вашем проекте, где вы пишете код javascript. имя файла. – Sandeep

его в пользовательском файле js. на самом деле его сайт wordpress. как это http://uploadpie.com/Me6Jc –

Проблема: вы не можете обнаружить :hover состояние на элементе с display: none

Возможным решением может быть, чтобы скрыть единственный в фотошопе себя, и послушайте :hover на обертке .place-image или на a или li как пожелаете.Смотрите ниже демо:

$('.place-image').hover(
 
    function() { 
 
     $('img', this).fadeIn('slow'); 
 
    },function() { 
 
     $('img', this).fadeOut('slow'); 
 
    } 
 
);

.place-image{ 
 
    width:326px; 
 
    height:326px; 
 
} 
 

 
.place-image img { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<li> 
 
    <a href="#">Cork</a> 
 
    <div class="place-image"> 
 
    <img src="http://classichits.ie/wp-content/uploads/2016/02/cork.png"> 
 
    </div> 
 
</li>

Альтернативное решение

В зависимости от обстоятельств вы могли бы добиться этого и без JS:

.place-image { 
 
    width:326px; 
 
    height:326px; 
 
} 
 

 
img { 
 
    opacity: 0; 
 
    transition: opacity .4s ease; 
 
    /*TODO: add crossbrowser prefixes*/ 
 
} 
 

 
li:hover img{ 
 
    opacity: 1; 
 
}

<ul> 
 
<li> 
 
    <a href="#">Cork</a> 
 
    <div class="place-image"> 
 
    <img src="http://classichits.ie/wp-content/uploads/2016/02/cork.png"> 
 
    </div> 
 
</li> 
 
</ul>

источник

2016-02-22 11:41:51 Matyas

спасибо, что ответили. Это именно то, что я пытаюсь сделать. Но, http://uploadpie.com/ehCC2 это то, что происходит. –

все еще такая же проблема, как на скриншоте –

$('a').hover(
 
    function() { 
 
     $('.place-image').fadeIn('slow'); 
 
    },function() { 
 
     $('.place-image').fadeOut('slow'); 
 
    } 
 
);

.place-image{ 
 
    display:none; 
 
} 
 

 
div.place-image{ 
 
width:326px; 
 
height:326px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<li> 
 
    <a href="#">Cork</a> 
 
    <div class="place-image"><img src="http://classichits.ie/wp-content/uploads/2016/02/cork.png"></div> 
 
</li>

источник

2018-03-07 06:34:37 user2716991

Показать изображение при наведении на кнопку

ответ

Альтернативное решение

Смежные вопросы