Zeigen bestimmte Scroll-Down-Symbol beim Überfahren?

Question

Ich habe die folgenden Symbole ... und wenn ich über ein Kreissymbol schwebe ... Ich möchte das Icon-Scroll-Down darunter anzeigen. Aber die untere js zeigt beide Icon-Scroll-Down. Wie kann ich nur den spezifischen darunter anzeigen?

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

Sie müssen die untergeordneten Elemente des Elements zum Ziel über Sie schweben. So etwas sollte funktionieren:

$('.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'}); 
}); 

Beachten Sie die Verwendung des this Schlüsselwort. Wenn es in Klammern mit einem Dollarzeichen, wie so $(this), eingewickelt wird, sagt es "nur Ziel das Element, das ich zurzeit schwebe".

Answer 2

Verwenden Sie das Kontext this Schlüsselwort, aber bitte lesen Sie den zweiten Teil:

$(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>

Aber ich würde eine CSS-basierte Lösung für diese bevorzugen. Siehe unten:

• Es ist schneller.
• JavaScript ist ein Overkill für Anzeigezwecke.
• Sie ändern gerade den CSS-Teil mit JavaScript, was eine kostspielige Operation ist.

.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>