Jquery Hoverエフェクト、ブートストラップ

Question

私はブートストラップカラムを使用しています。誰かがimgの上を飛ぶと、<p>をslideToggleにします。私は現在このセットを持っていますが、選択されたアイテムだけを表示し、同じdivエレメントの残りの<p>は表示しません。

たとえば、誰かが列＃1のイメージを横切っている場合、列＃1の<p>を表示するだけで、他の列はすべて表示しないようにします。ここに私のjQueryの

$(function() { 
 
    $("#columns img").hover(function() { 
 
    $(this).children("#columns p").each(function() { 
 
     $(this).slideToggle(); 
 
    }); 
 
    }); 
 
});

<div id="columns"> 
 
    <div class="row"> 
 
    <div class="col-md-4 col-sm-4"> 
 
     <img src="..." onload="this.width/=2;"> 
 
     <h3>First Column</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc suscipit convallis nisl, eget rutrum lectus commodo at. 
 
    </div> 
 
    <!-- end column --> 
 
    <div class="col-md-4 col-sm-4"> 
 
     <img src="..." onload="this.width/=2;"> 
 
     <h3>Second Column</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc suscipit convallis nisl, eget rutrum lectus commodo at.</p> 
 
    </div> 
 
    <!-- end column --> 
 
    <div class="col-md-4 col-sm-4"> 
 
     <img src="..." onload="this.width/=2;"> 
 
     <h3>Third Column</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc suscipit convallis nisl, eget rutrum lectus commodo at.</p> 
 
    </div> 
 
    <!-- end column --> 
 
    </div> 
 
    <!-- end row --> 
 
</div> 
 
<!-- end columns id -->

Answer 1

はあなたの質問は、不正な形式しているように見えるので、私はちょうどあなたがあなたのp要素をターゲットにすることはできませんと仮定しています。これを使用すると、ホバリングされた画像の対応するp要素にslideToggle()が呼び出されます。

$(function(){ 
    $("#columns img").hover(function() { 
     $(this).parent().find("p").slideToggle(); 
    }); 
}); 

Answer 2

私はあなたがdivで、各imgに対応する各imgすなわちh3とpタグのためにあなたの記述部分をラップし、最初のインスタンスでそれを隠して、ホバーにあなたがそれを示していることを示唆しています。以下の例をご覧ください。私はclass-descでdivに各画像の説明をラップしました。

$(function() { 
 
    $("#columns img").on('mouseover', function() { 
 
    $(this).siblings(".desc").show('slow',function(){ 
 
      $('.desc').not($(this)).hide('fast'); //hide all desc except current 
 
    }) //show only the sibling desc of current image 
 
    }); 
 
});

.desc { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div id="columns"> 
 
    <div class="row"> 
 
    <div class="col-md-4 col-sm-4"> 
 
     <img src="..." onload="this.width/=2;"> 
 
     <div class="desc"> 
 
     <h3>First Column</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc suscipit convallis nisl, eget rutrum lectus commodo at. 
 
     </div> 
 
    </div> 
 
    <!-- end column --> 
 
    <div class="col-md-4 col-sm-4"> 
 
     <img src="..." onload="this.width/=2;"> 
 
     <div class="desc"> 
 
     <h3>Second Column</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc suscipit convallis nisl, eget rutrum lectus commodo at.</p> 
 
     </div> 
 
    </div> 
 
    <!-- end column --> 
 
    <div class="col-md-4 col-sm-4"> 
 
     <img src="..." onload="this.width/=2;"> 
 
     <div class="desc"> 
 
     <h3>Third Column</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc suscipit convallis nisl, eget rutrum lectus commodo at.</p> 
 
     </div> 
 
    </div> 
 
    <!-- end column --> 
 
    </div> 
 
    <!-- end row --> 
 
</div> 
 
<!-- end columns id -->

今、あなたは、あなたが desc divにラップを避けることができますし、以下のように行い、常に表示されますのみ pタグと h3を表示したい場合は

：

$("#columns img").on('mouseover', function() { 
    $(this).siblings('p').slideToggle(); 
}); 

Answer 3

私は推測しますこれはあなたが望むものです。 slideToggleを使用するには、最初に段落を非表示にする必要があります。 あなたがホバーした画像のうち、closest('div')は親のdivに最も近いものを見つけ、その中に 'p'があり、その表示を切り替えることができます。

$(function(){ 
 
    $('p').hide(); 
 
    $("#columns img").hover(function() { 
 
     $(this).closest("div").find("p").slideToggle(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div id="columns"> 
 
<div class="row"> 
 
        <div class="col-md-4 col-sm-4"> 
 
         <img src="..." onload="this.width/=2;"> 
 
         <h3>First Column</h3> 
 
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc suscipit convallis nisl, eget rutrum lectus commodo at. 
 
        </div><!-- end column --> 
 
        <div class="col-md-4 col-sm-4"> 
 
         <img src="..." onload="this.width/=2;"> 
 
         <h3>Second Column</h3> 
 
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc suscipit convallis nisl, eget rutrum lectus commodo at.</p> 
 
        </div><!-- end column --> 
 
        <div class="col-md-4 col-sm-4"> 
 
         <img src="..." onload="this.width/=2;"> 
 
         <h3>Third Column</h3> 
 
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc suscipit convallis nisl, eget rutrum lectus commodo at.</p> 
 
       </div><!-- end column --> \t \t 
 
</div><!-- end row --> 
 
</div><!-- end columns id -->