javascript - Javascript - 多重项目的jQuery隐藏元素问题

116 1

请考虑下面的代码段。


$(document).ready(function(){


 $(".like-btn").hover(function() {


 var rowid = $(this).attr("data-rowid");


 $(".reaction-box[data-rowid='" + rowid +"']").fadeIn(100, function() {


 $(".reaction-icon").each(function(i, e) {


 setTimeout(function(){


 $(e).addClass("shows");


 }, i * 100);


 });


 });


}, function() {


 var rowid = $(".like-btn").attr("data-rowid");


 setTimeout(function(){


 $(".reaction-box[data-rowid='" + rowid +"']").fadeOut(300, function(){


 $(".reaction-icon").removeClass("shows")


 })


 }, 500);


});


});

.feed .like-btn {


 width: 44px;


 height: 25px;


 background: #D0D0D0;


 position: absolute;


 bottom: 13px;


 left: 13%;


 top: 10%;


 cursor: pointer;


 }


 .feed .like-btn::before {


 content:".";


 opacity: 0;


 display: block;


 width: 44px;


 height: 10px;


 position: absolute;


 top: -10px;


 left: 0;


 }


 .feed .like-btn .reaction-box {


 position: absolute;


 width: 155px;


 height: 55px;


 background: #FFF;


 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);


 border-radius: 28px;


 left: -25px;


 bottom: 35px;


 display: none;


 }


 .feed .like-btn .reaction-box .reaction-icon.angry {


 animation: fadeInLoad-angry 0.3s;


 -webkit-animation-timing-function: ease-out;


 animation-timing-function: ease-out;


 background-position: 0px 0px;


 }


 .feed .like-btn .reaction-box .reaction-icon.flower {


 animation: fadeInLoad-flower 0.3s;


 -webkit-animation-timing-function: ease-out;


 animation-timing-function: ease-out;


 background-position: 0px -40px;


 }


 .feed .like-btn .reaction-box .reaction-icon.haha {


 animation: fadeInLoad-haha 0.3s;


 -webkit-animation-timing-function: ease-out;


 animation-timing-function: ease-out;


 background-position: 0px -80px;


 }


 .feed .like-btn .reaction-box .reaction-icon.like {


 animation: fadeInLoad-like 0.3s;


 -webkit-animation-timing-function: ease-out;


 animation-timing-function: ease-out;


 background-position: 0px -120px;


 }


 .feed .like-btn .reaction-box .reaction-icon.love {


 animation: fadeInLoad-love 0.3s;


 -webkit-animation-timing-function: ease-out;


 animation-timing-function: ease-out;


 background-position: 0px -160px;


 }


 .feed .like-btn .reaction-box .reaction-icon.sad {


 animation: fadeInLoad-sad 0.3s;


 -webkit-animation-timing-function: ease-out;


 animation-timing-function: ease-out;


 background-position: 0px -200px;


 }


 .feed .like-btn .reaction-box .reaction-icon.wow {


 animation: fadeInLoad-wow 0.3s;


 -webkit-animation-timing-function: ease-out;


 animation-timing-function: ease-out;


 background-position: 0px -240px;


 }


 .feed .like-btn .reaction-box .reaction-icon {


 display: inline-block;


 width: 40px;


 height: 40px;


 background: url(data:image/png;base64,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);


 background-size: cover;


 border-radius: 20px;


 margin: 8px -1px 0 8px;


 text-align: center;


 pointer-events: none;


 transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);


 opacity: 0;


 transform: translate(0, 100px) scale(0);


 }


 .feed .like-btn .reaction-box .reaction-icon label {


 padding: 3px 5px 3px 5px;


 position: relative;


 top: -24px;


 border-radius: 10px;


 font-size: 11px;


 color: #FFF;


 background: #333;


 visibility: hidden;


 }


 .feed .like-btn .reaction-box .reaction-icon.shows {


 opacity: 1;


 transform: translate(0, 0) scale(1);


 pointer-events: auto;


 }


 .feed .like-btn .reaction-box .reaction-icon:hover {


 transform: scale(1.4);


 transform-origin: bottom;


 }


 .feed .like-btn .reaction-box .reaction-icon:hover label {


 visibility: visible;


 }


 .feed .like-btn:hover {


 background: #718C00;


 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>


<div class="feed">


 <a class="like-btn" data-rowid="1"> Hover


 <div class="reaction-box" data-rowid="1">


 <div class="reaction-icon like">


 <label>Like</label>


 </div>


 <div class="reaction-icon love">


 <label>Love</label>


 </div>


 <div class="reaction-icon haha">


 <label>Haha</label>


 </div>


 </div>


 </a>


 <a class="like-btn" style="margin-top: 50px" data-rowid="2"> Hover


 <div class="reaction-box" data-rowid="2">


 <div class="reaction-icon like">


 <label>Like</label>


 </div>


 <div class="reaction-icon love">


 <label>Love</label>


 </div>


 <div class="reaction-icon haha">


 <label>Haha</label>


 </div>


 </div>


 </a>


 <a class="like-btn" style="margin-top: 100px" data-rowid="3"> Hover


 <div class="reaction-box" data-rowid="3">


 <div class="reaction-icon like">


 <label>Like</label>


 </div>


 <div class="reaction-icon love">


 <label>Love</label>


 </div>


 <div class="reaction-icon haha">


 <label>Haha</label>


 </div>


 </div>


 </a>


 <a class="like-btn" style="margin-top: 150px" data-rowid="4"> Hover


 <div class="reaction-box" data-rowid="4">


 <div class="reaction-icon like">


 <label>Like</label>


 </div>


 <div class="reaction-icon love">


 <label>Love</label>


 </div>


 <div class="reaction-icon haha">


 <label>Haha</label>


 </div>


 </div>


 </a>


 </div>

当你悬停一个按钮时,会看到弹出,但是在光标离开按钮时,它不会退出或隐藏。

时间: 原作者:

87 5

用于fadeoutrowidvar rowid = $(".like-btn").attr("data-rowid");将始终返回1,因为显式引用.like-btn,相反,你需要修改为 var rowid = $(this).attr("data-rowid");这将获取悬停的rowid 。


$(document).ready(function() {


 $(".like-btn").hover(function() {


 var rowid = $(this).attr("data-rowid");


 $(".reaction-box[data-rowid='" + rowid +"']").fadeIn(100, function() {


 $(".reaction-icon").each(function(i, e) {


 setTimeout(function() {


 $(e).addClass("shows");


 }, i * 100);


 });


 });


 }, function() {


 var rowid = $(this).attr("data-rowid");


 setTimeout(function() {


 $(".reaction-box[data-rowid='" + rowid +"']").fadeOut(300, function() {


 $(".reaction-icon").removeClass("shows")


 })


 }, 500);


 });


});

.feed .like-btn {


 width: 44px;


 height: 25px;


 background: #D0D0D0;


 position: absolute;


 bottom: 13px;


 left: 13%;


 top: 10%;


 cursor: pointer;


}



.feed .like-btn::before {


 content:".";


 opacity: 0;


 display: block;


 width: 44px;


 height: 10px;


 position: absolute;


 top: -10px;


 left: 0;


}



.feed .like-btn .reaction-box {


 position: absolute;


 width: 155px;


 height: 55px;


 background: #FFF;


 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);


 border-radius: 28px;


 left: -25px;


 bottom: 35px;


 display: none;


}



.feed .like-btn .reaction-box .reaction-icon.angry {


 animation: fadeInLoad-angry 0.3s;


 -webkit-animation-timing-function: ease-out;


 animation-timing-function: ease-out;


 background-position: 0px 0px;


}



.feed .like-btn .reaction-box .reaction-icon.flower {


 animation: fadeInLoad-flower 0.3s;


 -webkit-animation-timing-function: ease-out;


 animation-timing-function: ease-out;


 background-position: 0px -40px;


}



.feed .like-btn .reaction-box .reaction-icon.haha {


 animation: fadeInLoad-haha 0.3s;


 -webkit-animation-timing-function: ease-out;


 animation-timing-function: ease-out;


 background-position: 0px -80px;


}



.feed .like-btn .reaction-box .reaction-icon.like {


 animation: fadeInLoad-like 0.3s;


 -webkit-animation-timing-function: ease-out;


 animation-timing-function: ease-out;


 background-position: 0px -120px;


}



.feed .like-btn .reaction-box .reaction-icon.love {


 animation: fadeInLoad-love 0.3s;


 -webkit-animation-timing-function: ease-out;


 animation-timing-function: ease-out;


 background-position: 0px -160px;


}



.feed .like-btn .reaction-box .reaction-icon.sad {


 animation: fadeInLoad-sad 0.3s;


 -webkit-animation-timing-function: ease-out;


 animation-timing-function: ease-out;


 background-position: 0px -200px;


}



.feed .like-btn .reaction-box .reaction-icon.wow {


 animation: fadeInLoad-wow 0.3s;


 -webkit-animation-timing-function: ease-out;


 animation-timing-function: ease-out;


 background-position: 0px -240px;


}



.feed .like-btn .reaction-box .reaction-icon {


 display: inline-block;


 width: 40px;


 height: 40px;


 background: url(data:image/png;base64,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);


 background-size: cover;


 border-radius: 20px;


 margin: 8px -1px 0 8px;


 text-align: center;


 pointer-events: none;


 transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);


 opacity: 0;


 transform: translate(0, 100px) scale(0);


}



.feed .like-btn .reaction-box .reaction-icon label {


 padding: 3px 5px 3px 5px;


 position: relative;


 top: -24px;


 border-radius: 10px;


 font-size: 11px;


 color: #FFF;


 background: #333;


 visibility: hidden;


}



.feed .like-btn .reaction-box .reaction-icon.shows {


 opacity: 1;


 transform: translate(0, 0) scale(1);


 pointer-events: auto;


}



.feed .like-btn .reaction-box .reaction-icon:hover {


 transform: scale(1.4);


 transform-origin: bottom;


}



.feed .like-btn .reaction-box .reaction-icon:hover label {


 visibility: visible;


}



.feed .like-btn:hover {


 background: #718C00;


}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>


<div class="feed">


 <a class="like-btn" data-rowid="1"> Hover


 <div class="reaction-box" data-rowid="1">


 <div class="reaction-icon like">


 <label>Like</label>


 </div>


 <div class="reaction-icon love">


 <label>Love</label>


 </div>


 <div class="reaction-icon haha">


 <label>Haha</label>


 </div>


 </div>


 </a>


 <a class="like-btn" style="margin-top: 50px" data-rowid="2"> Hover


 <div class="reaction-box" data-rowid="2">


 <div class="reaction-icon like">


 <label>Like</label>


 </div>


 <div class="reaction-icon love">


 <label>Love</label>


 </div>


 <div class="reaction-icon haha">


 <label>Haha</label>


 </div>


 </div>


 </a>


 <a class="like-btn" style="margin-top: 100px" data-rowid="3"> Hover


 <div class="reaction-box" data-rowid="3">


 <div class="reaction-icon like">


 <label>Like</label>


 </div>


 <div class="reaction-icon love">


 <label>Love</label>


 </div>


 <div class="reaction-icon haha">


 <label>Haha</label>


 </div>


 </div>


 </a>


 <a class="like-btn" style="margin-top: 150px" data-rowid="4"> Hover


 <div class="reaction-box" data-rowid="4">


 <div class="reaction-icon like">


 <label>Like</label>


 </div>


 <div class="reaction-icon love">


 <label>Love</label>


 </div>


 <div class="reaction-icon haha">


 <label>Haha</label>


 </div>


 </div>


 </a>


</div>

原作者:
126 0

一个CSS-only解决方案,例如:使用:hover来显示它。


.feed .like-btn {


 width: 44px;


 height: 25px;


 background: #D0D0D0;


 position: absolute;


 bottom: 13px;


 left: 13%;


 top: 10%;


 cursor: pointer;


}



.feed .like-btn::before {


 content:".";


 opacity: 0;


 display: block;


 width: 44px;


 height: 10px;


 position: absolute;


 top: -10px;


 left: 0;


}



.feed .like-btn .reaction-box {


 position: absolute;


 width: 155px;


 height: 55px;


 background: #FFF;


 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);


 border-radius: 28px;


 left: -25px;


 bottom: 35px;


 display: none;


}



.feed .like-btn .reaction-box .reaction-icon.angry {


 animation: fadeInLoad-angry 0.3s;


 -webkit-animation-timing-function: ease-out;


 animation-timing-function: ease-out;


 background-position: 0px 0px;


}



.feed .like-btn .reaction-box .reaction-icon.flower {


 animation: fadeInLoad-flower 0.3s;


 -webkit-animation-timing-function: ease-out;


 animation-timing-function: ease-out;


 background-position: 0px -40px;


}



.feed .like-btn .reaction-box .reaction-icon.haha {


 animation: fadeInLoad-haha 0.3s;


 -webkit-animation-timing-function: ease-out;


 animation-timing-function: ease-out;


 background-position: 0px -80px;


}



.feed .like-btn .reaction-box .reaction-icon.like {


 animation: fadeInLoad-like 0.3s;


 -webkit-animation-timing-function: ease-out;


 animation-timing-function: ease-out;


 background-position: 0px -120px;


}



.feed .like-btn .reaction-box .reaction-icon.love {


 animation: fadeInLoad-love 0.3s;


 -webkit-animation-timing-function: ease-out;


 animation-timing-function: ease-out;


 background-position: 0px -160px;


}



.feed .like-btn .reaction-box .reaction-icon.sad {


 animation: fadeInLoad-sad 0.3s;


 -webkit-animation-timing-function: ease-out;


 animation-timing-function: ease-out;


 background-position: 0px -200px;


}



.feed .like-btn .reaction-box .reaction-icon.wow {


 animation: fadeInLoad-wow 0.3s;


 -webkit-animation-timing-function: ease-out;


 animation-timing-function: ease-out;


 background-position: 0px -240px;


}



.feed .like-btn .reaction-box .reaction-icon {


 display: inline-block;


 width: 40px;


 height: 40px;


 background: url(data:image/png;base64,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);


 background-size: cover;


 border-radius: 20px;


 margin: 8px -1px 0 8px;


 text-align: center;


 pointer-events: none;


 transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);


 opacity: 0;


 transform: translate(0, 100px) scale(0);


}



.feed .like-btn .reaction-box .reaction-icon label {


 padding: 3px 5px 3px 5px;


 position: relative;


 top: -24px;


 border-radius: 10px;


 font-size: 11px;


 color: #FFF;


 background: #333;


 visibility: hidden;


}



.feed .like-btn .reaction-box .reaction-icon.shows {


 opacity: 1;


 transform: translate(0, 0) scale(1);


 pointer-events: auto;


}



.feed .like-btn .reaction-box .reaction-icon:hover {


 transform: scale(1.4);


 transform-origin: bottom;


}



.feed .like-btn .reaction-box .reaction-icon:hover label {


 visibility: visible;


}



.feed .like-btn:hover {


 background: #718C00;


}



.like-btn:hover .reaction-box{


 display: block;


}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>


<div class="feed">


 <a class="like-btn" data-rowid="1"> Hover


 <div class="reaction-box" data-rowid="1">


 <div class="reaction-icon like">


 <label>Like</label>


 </div>


 <div class="reaction-icon love">


 <label>Love</label>


 </div>


 <div class="reaction-icon haha">


 <label>Haha</label>


 </div>


 </div>


 </a>


 <a class="like-btn" style="margin-top: 50px" data-rowid="2"> Hover


 <div class="reaction-box" data-rowid="2">


 <div class="reaction-icon like">


 <label>Like</label>


 </div>


 <div class="reaction-icon love">


 <label>Love</label>


 </div>


 <div class="reaction-icon haha">


 <label>Haha</label>


 </div>


 </div>


 </a>


 <a class="like-btn" style="margin-top: 100px" data-rowid="3"> Hover


 <div class="reaction-box" data-rowid="3">


 <div class="reaction-icon like">


 <label>Like</label>


 </div>


 <div class="reaction-icon love">


 <label>Love</label>


 </div>


 <div class="reaction-icon haha">


 <label>Haha</label>


 </div>


 </div>


 </a>


 <a class="like-btn" style="margin-top: 150px" data-rowid="4"> Hover


 <div class="reaction-box" data-rowid="4">


 <div class="reaction-icon like">


 <label>Like</label>


 </div>


 <div class="reaction-icon love">


 <label>Love</label>


 </div>


 <div class="reaction-icon haha">


 <label>Haha</label>


 </div>


 </div>


 </a>


</div>

原作者:
...