Philipp M Philipp M - 1 year ago 64
Javascript Question

Showing specific Scroll Down Icon when hovering over?

I have the below icons ... and when hovering over a circle-icon ... I want to show the icon-scroll-down underneath it. But the below js shows both icon-scroll-down. How can I only show the specific one underneath?

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 Source

You need to target the child elements of the item you're hovering over. Something like this should work:

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

Note the use of the this keyword. When wrapped in brackets with a dollar sign, like so $(this), it's saying "only target the element I'm currently hovering over".

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download