Javascript 在div元素内向上滑动div元素
当使用“card1”悬停在div id上时，如何使用“front”向上滑动div id 另外，当鼠标指针不在该div上时，带有“front”的div id应该向下滑动。请有CSS作为参考Javascript 在div元素内向上滑动div元素,javascript,jquery,html,css,Javascript,Jquery,Html,Css,当使用“card1”悬停在div id上时，如何使用“front”向上滑动div id 另外，当鼠标指针不在该div上时，带有“front”的div id应该向下滑动。请有CSS作为参考 <html> <head> <style> .cards{ position:relative; } #front{ position:absolute; left:50px; z-index:2; back
<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>
.卡片{
位置：相对位置；
}
#正面{
位置：绝对位置；
左：50px；
z指数：2；
背景色：红色；
颜色：白色；
高度：200px；
宽度：200px；
边界半径：5px；
}
#背{
位置：绝对位置；
左：50px；
z指数：1；
高度：200px；
宽度：200px；
背景颜色：蓝色；
颜色：白色；
边界半径：5px；
}
你好
描述
显示消息
显示消息
提前感谢。您可以使用javascript实现这一点 在“#card1”上放置两个事件侦听器
$（'#card1'）。在（'mouseenter'，function（）上{
$（'#front'）.css（'margin-top'，'-100px'））
}).on（'mouseout'，function（）{
$（'#front'）.css（'margin-top'，'0'））
})
.卡片{
位置：相对位置；
}
#正面{
位置：绝对位置；
左：50px；
z指数：2；
背景色：红色；
颜色：白色；
高度：200px；
宽度：200px；
边界半径：5px；
}
#背{
位置：绝对位置；
左：50px；
z指数：1；
高度：200px；
宽度：200px；
背景颜色：蓝色；
颜色：白色；
边界半径：5px；
}
$（文档）.ready（函数（）{
$（'div[id=“card1”]”）。on（'mouseover'，function（）{
$（'div[id=“front”]”）。slideUp（）；
});
$（'div[id=“card1”]”）。在（'mouseleave'，函数（）{
$（'div[id=“front”]”）。slideDown（）；
});
});
你好
描述
显示消息
显示消息
按钮，您不应该有多个元素具有相同的id。请同时添加css。我如何动态检索id“card1”您自己提供id。那么，为什么需要动态地检索它呢？您已经随身携带了它…您知道IDBECA是什么，因为可以有多个div标记，如card1，例如：-card2、card3等等。然后根据类名进行操作。给你所有的动态div一个通用的类名，比如“cards”。并为该类放置事件侦听器。如果需要，在每个分区（“卡片”）内提供两个公共类，如“前”和“后”。现在你所要做的就是对付“老鼠”；在“.card”中，找到“.front”类，并将页边距顶部设置为-10px，然后在“mouseout”中，将页边距顶部设置为0px，以“.front”类。确定。如果您遇到任何问题，请告诉我：）