任何帮助将不胜感激!截至目前,我有以下内容......当您将鼠标悬停在左侧的图像上时,div 会显示在它旁边并向左/向右切换。但是,我的页面上需要四个,当我将鼠标悬停在一个上时,其余的也一样,我怎样才能将它们分开?或者有更好的方法......即。显示/隐藏功能...我将如何使用 Jquery 来解决这个问题?我已经搜索了几个地方,但没有一个显示我需要的东西。谢谢。
$(document).ready(function(){
$(".slide-toggle").hover(function(){
$(".box").animate({
width: "toggle"
});
});
});
.slide-toggle {
float:left;
}
.box{
float:left;
overflow: hidden;
background: #f0e68c;
}
.box-inner{
width: 100px;
height:30px;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="slide-toggle" src="tree.png" width="50" height="50">
<div class="box">
<div class="box-inner">Lorem ipsum dolor sit amet...</div>
</div>
最佳答案
您可以使用 .next()
和 ".box"
作为参数
$(document).ready(function() {
$(".slide-toggle").hover(function() {
$(this).next(".box").animate({
width: "toggle"
});
});
});
.slide-toggle {
float: left;
}
.box {
float: left;
overflow: hidden;
background: #f0e68c;
}
.box-inner {
width: 100px;
height: 30px;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="slide-toggle" src="tree.png" width="50" height="50">
<div class="box">
<div class="box-inner">Lorem ipsum dolor sit amet...</div>
</div>
<img class="slide-toggle" src="tree.png" width="50" height="50">
<div class="box">
<div class="box-inner">Lorem ipsum dolor sit amet...</div>
</div>
关于javascript - 在它旁边的悬停图像显示 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40967487/