懸停時顯示特定的向下滾動圖標？

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>