在 div 元素内向上滑动 div 元素
[英]Slide Up a div element inside a div element
问题描述
当鼠标指针不在该 div 上时，如何在带有“card1”的 div id 上悬停时将带有“front”的 div id 向上滑动，带有“front”的 div id 应该向下滑动。 请有 CSS 供参考
<html>
<head>
<style>
.cards{
position:relative;
}
#front{
position:absolute;
left:50px;
z-index:2;
background-color:red;
color:white;
height:200px;
width:200px;
border-radius:5px;
}
#back{
position:absolute;
left:50px;
z-index:1;
height:200px;
width:200px;
background-color:blue;
color:white;
border-radius:5px;
}
</style>
</head>
<body>
<div class="cards" id="card1">
<div id="front">
<div class="caption" style="text-align:center;">
<h6><b>Hello</b></h6>
</div>
</div>
<div id="back">
<div id="buttons">
<button class="btn btn-primary lis" data-toggle="modal" data-target="#hello">Description</button>
<button class="btn btn-primary lis" data-toggle="modal" data-target="#heelo1">show message</button>
<button class="btn btn-primary lis">show message</button>
</div>
<div id="buttons">
<img id="imagesLg" src="thiser.gif" alt="HelloWorld"/>
</div>
</div>
</div>
</body>
</html>
提前致谢。
2 个解决方案
解决方案1
0 2017-10-16 12:05:05
您可以使用 javascript 实现这一点。
将两个事件侦听器放在“#card1”上。
首先 mousein，在 mousein 上提升 '#front' 分区（你可以使用 margin-top: -100px 或它上面的任何东西），
并使用 mouseout，在 mouseout 上将 '#front' 分区放在其原始位置（margin-top: 0px）
$('#card1').on('mouseenter',function(){ $('#front').css('margin-top','-100px') }).on('mouseout',function(){ $('#front').css('margin-top','0') })
我已经使用 jquery 完成了它（没有任何动画和东西的基本实现）。
如果您不清楚，请发表评论。
谢谢
解决方案2
0 已采纳 2017-10-17 04:10:34
希望我的回答能帮到你！
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> .cards { position: relative; } #front { position: absolute; left: 50px; z-index: 2; background-color: red; color: white; height: 200px; width: 200px; border-radius: 5px; } #back { position: absolute; left: 50px; z-index: 1; height: 200px; width: 200px; background-color: blue; color: white; border-radius: 5px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $('div[id="card1"]').on('mouseover', function () { $('div[id="front"]').slideUp(); }); $('div[id="card1"]').on('mouseleave', function () { $('div[id="front"]').slideDown(); }); }); </script> <title></title> </head> <body> <div class="cards" id="card1"> <div id="front"> <div class="caption" style="text-align:center;"> <h6><b>Hello</b></h6> </div> </div> <div id="back"> <div id="buttons"> <button class="btn btn-primary lis" data-toggle="modal" data-target="#hello">Description</button> <button class="btn btn-primary lis" data-toggle="modal" data-target="#heelo1">show message</button> <button class="btn btn-primary lis">show message</button> </div> <div id="buttons"> <img id="imagesLg" src="thiser.gif" alt="HelloWorld" /> </div> </div> </div> </body> </html>
如何将元素滑入和滑出Div
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.