我有以下图标......当鼠标悬停在圆形图标上时...我想在其下方显示图标向下滚动。但是下面的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>
&#13;
答案 0 :(得分: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的解决方案。见下文:
.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>
答案 1 :(得分:0)
您需要定位要悬停的项目的子元素。这样的事情应该有效:
$('.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)
那样用括号括起来,它会说&#34;只针对我目前悬停在&#34;上的元素。