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