悬停图像显示div右侧

任何帮助，将不胜感激！截至目前，我有以下...当你将鼠标悬停在左侧的图像上时，div显示在其旁边并左右切换。但是，当我将鼠标悬停在另一页上时，我的页面上需要四个，其余的则如何分开？还是有更好的方法...即。显示/隐藏功能...我将如何使用JQuery来解决这个问题？我搜索了几个地方，没有显示我需要什么。谢谢。悬停图像显示div右侧

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

来源

2016-12-05 lizmart

出现这种情况的原因是因为'$动画（）'将动画**与类名‘框中的’EVERY **元。同样，'$（“。slide-toggle”）。hover（）'会将此操作添加到** EVERY **元素中，类名称为“slide-toggle”。 **因此，每当您将鼠标悬停在任何“滑动切换”上时，每个“框”都会生成动画。** –

@lizmart请参阅http://stackoverflow.com/help/someone-answers – guest271314

您可以使用.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>

来源

2016-12-05 05:17:18 guest271314

它的工作原理。谢谢！ – lizmart

您可以定位旁边的图像与与.box类股利功能像

$(this).next('.box').animate({ 
     width: "toggle" 
    });

它不会在你的情况，因为当你使用

$(".box").animate({ 
    width: "toggle" 
});

工作，这将选择有一个类.box，然后所有的人

的动画应用的所有HTML元素

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

来源

2016-12-05 05:19:50

由于您的盒子是图像标签的兄弟。您可以将图像和框包装到另一个父标签中，并将图像标签引用到父项，并找到框并为其设置动画。但是你可以通过下面的代码直接找到下一个图像。

$(document).ready(function(){ 
    $(".slide-toggle").hover(function(){ 
    $(this).next('.box').animate({ 
     width: "toggle" 
    }); 
    }); 
});

它会正常工作。投票它的作品

来源

2016-12-05 05:21:38

非常感谢你。 – lizmart

如果你喜欢就投票 –

你甚至不需要JavaScript或jQuery来做到这一点。你可以做到这一点在纯CSS：（“框”）。

.slide-toggle { 
    float:left; 
} 
.box { 
    float:left; 
    overflow: hidden; 
    background: #f0e68c; 
} 
.box-inner { 
    width: 100px; 
    height:30px; 
    padding: 10px; 
} 
.slide-toggle:hover + .box { 
    /* use an animation or transition here to change the width */ 
} 

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

来源

2016-12-05 06:45:26 Derek

悬停图像显示div右侧

回答

相关问题