ホバーすると特定のスクロールダウンアイコンが表示されますか？

Question

私は以下のアイコンを持っています...サークルアイコンの上にマウスを置いたときに...アイコンをスクロールダウンして表示したいと思います。しかし、下のjsはアイコンスクロールダウンの両方を示しています。どのように特定のものだけを下に示すことができますか？

https://jsfiddle.net/lbriquet/397488j4/

// Show Scroll Arrow Down on hover 
 
$('.container-flow-wrapper .circle-icon') 
 
.mouseenter(function() { 
 
    $('.container-flow-wrapper .icon-scroll-down').css({'visibility': 'visible'}); 
 
}) 
 
.mouseleave(function() { 
 
    $('.container-flow-wrapper .icon-scroll-down').css({'visibility': 'hidden'}); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<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.7/js/bootstrap.min.js"></script> 
 
<div class="col-md-12">   
 
    <div class="col-sm-6 align-center"> 
 
     <div class="container-flow-wrapper"> 
 
      <div class="container-flow">  
 
       <i class="fa fa-globe fa-5x circle-icon"/></i> 
 
      </div> 
 
      <i class="fa fa-arrow-down icon-scroll-down"></i> 
 
     </div> 
 
    </div>     
 
    <div class="col-sm-6 align-center"> 
 
     <div class="container-flow-wrapper"> 
 
      <div class="container-flow">  
 
       <i class="fa fa-user fa-5x circle-icon"/></i> 
 
      </div> 
 
      <i class="fa fa-arrow-down icon-scroll-down"></i>  
 
     </div>    
 
    </div> 
 
</div>

Answer 1

あなたがオーバーホバリングしているアイテムの子要素をターゲットにする必要があります。このような何か作業をする必要があります：

$('.container-flow-wrapper .circle-icon') 
.mouseenter(function() { 
    $(this).parents().children('.icon-scroll-down').css({'visibility': 
'visible'}); 
}) 
.mouseleave(function() { 
    $(this).parents().children('.icon-scroll-down').css({'visibility': 
'hidden'}); 
}); 

thisキーワードの使用に注意してください。ドル記号のついた角かっこで囲まれている場合は、「$(this)」のように、「私が現在取り上げている要素のみを対象にしています」と言います。

Answer 2

は文脈thisキーワードを使用しますが、してくださいは、第二部読み：

$(function() { 
 
    // Show Scroll Arrow Down on hover 
 
    $('.container-flow-wrapper') 
 
    .mouseenter(function() { 
 
     $(this).find('.icon-scroll-down').css({ 
 
     'visibility': 'visible' 
 
     }); 
 
    }) 
 
    .mouseleave(function() { 
 
     $(this).find('.icon-scroll-down').css({ 
 
     'visibility': 'hidden' 
 
     }); 
 
    }); 
 
});

<script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> 
 
<div class="col-md-12"> 
 
    <div class="col-sm-6 align-center"> 
 
    <div class="container-flow-wrapper"> 
 
     <div class="container-flow"> 
 
     <i class="fa fa-globe fa-5x circle-icon"></i> 
 
     </div> 
 
     <i class="fa fa-arrow-down icon-scroll-down"></i> 
 
    </div> 
 
    </div> 
 
    <div class="col-sm-6 align-center"> 
 
    <div class="container-flow-wrapper"> 
 
     <div class="container-flow"> 
 
     <i class="fa fa-user fa-5x circle-icon"></i> 
 
     </div> 
 
     <i class="fa fa-arrow-down icon-scroll-down"></i> 
 
    </div> 
 
    </div> 
 
</div>

をしかし、私はこのためCSSベースのソリューションを好むだろう。下記を参照してください。

• これは高速です。
• JavaScriptは表示のための過剰な機能です。
• JavaScriptを使用してCSS部分を変更するだけですが、これはコストのかかる操作です。

.container-flow-wrapper .icon-scroll-down {visibility: hidden;} 
 
.container-flow-wrapper:hover .icon-scroll-down {visibility: visible;}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> 
 
<div class="col-md-12"> 
 
    <div class="col-sm-6 align-center"> 
 
    <div class="container-flow-wrapper"> 
 
     <div class="container-flow"> 
 
     <i class="fa fa-globe fa-5x circle-icon"></i> 
 
     </div> 
 
     <i class="fa fa-arrow-down icon-scroll-down"></i> 
 
    </div> 
 
    </div> 
 
    <div class="col-sm-6 align-center"> 
 
    <div class="container-flow-wrapper"> 
 
     <div class="container-flow"> 
 
     <i class="fa fa-user fa-5x circle-icon"></i> 
 
     </div> 
 
     <i class="fa fa-arrow-down icon-scroll-down"></i> 
 
    </div> 
 
    </div> 
 
</div>