悬停时显示特定的向下滚动图标？

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>