如何使懸停效果使用Javascript顯示div中的元素

Question

因此，我是javascript新手，我一直在嘗試編寫一個可更改div的不透明度並顯示其隱藏的'p'元素的程序。 但是當我將div懸停時，另一個div中隱藏的'p'元素就會出現。如何使'p'元素僅在懸停的div中顯示？ 請任何建議/建議將不勝感激。 謝謝

的HTML

<div class = "description">
    <a><img src="image.jpg" height = 330px width = 220px></a>
    <p class = "word"> image description</p>
</div>
<div class = "description">
    <a><img src="image.jpg" height = 330px width = 220px></a>
    <p class = "word"> image description</p>
</div>

Java腳本

$(document).ready(function(){
 $('.word').hide();
 $('.description').hover(function(){

     $(this).fadeTo('fast',0.6);
     $('.word').show();
 });

 $('.description').mouseleave(function(){

     $('.description').fadeTo('fast',1);
     $('.word').hide();
 }); 
});  

Answer 1

您想查找該特定div中的.word元素，因此可以使用$(this).find()

$(document).ready(function(){
 $('.word').hide();
 $('.description').hover(function(){

     $(this).fadeTo('fast',0.6);
     $(this).find('.word').show();
 });

 $('.description').mouseleave(function(){

     $(this).fadeTo('fast',1);
     $(this).find('.word').hide();
 }); 
});  

或更簡潔

$(document).ready(function(){
 $('.word').hide();
 $('.description').hover(function(){
     $(this).fadeTo('fast',0.6).find('.word').show();
 }).mouseleave(function(){
     $(this).fadeTo('fast',1).find('.word').hide();
 }); 
});  

另外，您的img標簽是錯誤的。 您的意思是<img src="image.jpg" style="height: 330px; width: 220px">

Answer 2

在兩種情況下，您都希望獲得$(this)的子p.word元素：

$(document).ready(function () {
    $('.word').hide();
    $('.description').hover(function () {
        $(this).fadeTo('fast', 0.6);
        $(this).find('p.words').show();
    });

    $('.description').mouseleave(function () {

        $(this).fadeTo('fast', 1);
        $(this).find('p.words').hide();
    });
});

請記住，如果的CSS .words是visibility : hidden ，而不是display : none你需要改變.show()和.hide()到：

// show
$(this).find('p.words').css('visibility', 'visible');
// hide
$(this).find('p.words').css('visibility', 'hidden');

工作示例：

 $(document).ready(function () { $('.word').hide(); $('.description').hover(function () { $(this).fadeTo('fast', 0.6); $(this).find('p.words').show(); }); $('.description').mouseleave(function () { $(this).fadeTo('fast', 1); $(this).find('p.words').hide(); }); }); 

 .words{ display: none; } .description{ padding: 20px; border: solid 2px steelblue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="description"> <p class="words">image description</p> </div> <div class="description"> <p class="words">image description</p> </div> <div class="description"> <p class="words">image description</p> </div> <div class="description"> <p class="words">image description</p> </div> <div class="description"> <p class="words">image description</p> </div> 

Answer 3

您必須使用： $( '.description > .word ')來獲得孩子。