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

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

使用上下文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>