На картинке hover показать элемент списка

Question

При наведении на изображение я хотел бы показать элемент списка. Моя проблема в том, что я не совсем уверен, как вызывать только li, который я вишу, используя jquery.

HTML

<ul class="test"> 
<li><img></li> 
<li class="hidden"><img></li> 
<li><img></li> 
<li class="hidden"><img></li> 
</ul> 

CSS

.test .hidden { display:none; } 

Jquery

$(document).ready(function(){ 
    $(this).find(".test li img").hover(function(){ 
     $(this).find('.test .hidden').show(); 
     },function(){ 
     $(this).find('.test .hidden').hide(); 
     }); 
}); 

Answer 1

I создали для вас скрипку. Просто взгляните на это.

<ul class="test"> 
<li><span class="image">Image 1</span></li> 
<li class="hidden"><img>showthis</li> 
<li><span class="image">Image 2</span></li> 
<li class="hidden"><img>showthis</li> 
</ul> 

.test .hidden { display:none; } 

$(document).ready(function(){ 
    $(".test li .image").mouseover(function(){ 
     $(this).parent('li').next('li').removeClass("hidden"); 
    }); 

    $(".test li .image").mouseout(function(){ 
     $(this).parent('li').next('li').addClass("hidden"); 
    }); 
}); 

https://jsfiddle.net/swaprks/2zs1sq65/

Answer 2

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

вот JSFiddle (Намек на следующий раз ... сделать это, прежде чем задать вопрос.)

(without any CSS at all...) 

<ul class="test">test 
<li><img src="https://placehold.it/350x150"/></li> 
<li><img src="https://placehold.it/350x150"/></li> 
<li><img src="https://placehold.it/350x150"/></li> 
</ul> 

$(document).ready(function(){ 
    $(".test li img").hover(function(){ 
     alert("Hello there."); 
     $(this).hide(); 
     }); 
}); 

Что, именно то, что вы пытаетесь достичь?

Обновление: JSfiddle У вас должно быть что-то зависающее, даже если его несколько «nonBlankingSpaceCharacters» Здесь я использую точки для неупорядоченного списка. (На самом деле, как я смотрю на это, на этом JSfiddle, то <li> элемента имеет 100% ширину дисплея, поэтому ловит события наведения курсора мыши довольно легко.)

.test li img{display: none;} 
img:hover { outline: dotted red; } 

<ul class="test">test 
<li><img src="https://placehold.it/350x150"/></li> 
<li><img src="https://placehold.it/350x150"/></li> 
<li><img src="https://placehold.it/350x150"/></li> 
</ul> 

$(document).ready(function(){ 
    $(".test li").hover(function(){ 
     //alert("Hello there."); 
     $(this).children("img").show(); 
     }); 
}); 

Одна хорошая ссылка Mozilla Developer Network posting on Hover event. Посмотрите на описании Выпадающего меню.

Answer 3

Вы можете использовать следующий код в CSS, без Jquery:

li:hover{ 
    display:block; 
} 

HTML код:

<ul > 
<li> test<img src="https://placehold.it/350x150"/></li> 
<li>test<img src="https://placehold.it/350x150"/></li> 
<li>test<img src="https://placehold.it/350x150"/></li> 
</ul> 

CSS код:

li:hover >img{display:block !important;} 

Jsfiddle Link