在 div 元素内向上滑动 div 元素
[英]Slide Up a div element inside a div element
问题描述
How can I slide up div id with "front" when hovering on div id with "card1" also when the mouse pointer is not on that div, div id with "front" should slide down.
当鼠标指针不在该 div 上时，如何在带有“card1”的 div id 上悬停时将带有“front”的 div id 向上滑动，带有“front”的 div id 应该向下滑动。 Please have CSS for reference请有 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>
Thanks in advance.提前致谢。
2 个解决方案
解决方案1
0 2017-10-16 12:05:05
You can achieve that using javascript.您可以使用 javascript 实现这一点。
Put two event listener on '#card1'.将两个事件侦听器放在“#card1”上。
First mousein, on mousein elevate the '#front' division (you can use margin-top: -100px or anything on it),
首先 mousein，在 mousein 上提升 '#front' 分区（你可以使用 margin-top: -100px 或它上面的任何东西），And use mouseout, on mouseout put the '#front' division on its original position(margin-top: 0px)
并使用 mouseout，在 mouseout 上将 '#front' 分区放在其原始位置（margin-top: 0px）
$('#card1').on('mouseenter',function(){ $('#front').css('margin-top','-100px') }).on('mouseout',function(){ $('#front').css('margin-top','0') })
I've done it (basic implementation without any animation and stuff) using jquery.我已经使用 jquery 完成了它（没有任何动画和东西的基本实现）。
Do leave a comment if its not clear to you.如果您不清楚，请发表评论。
Thanks谢谢
解决方案2
0 已采纳 2017-10-17 04:10:34
I hope my answser will help u !希望我的回答能帮到你！
<!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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.