[英]I have 5 div's and I want them to fill the parent div on mouse hover
我有這 5 個 div，我希望它們在鼠標懸停時填充父 div 我有這些代碼，但它們不會將前一個 div（上面的 div）推到任何地方。
這是 HTML 代碼：
<div id="photo">
<div id="no1">
</div>
<div id="no2">
</div>
<div id="no3">
</div>
<div id="no4">
</div>
<div id="no5">
</div>
這是CSS：
div#photo{
margin:10px 0;
padding:5px;
width:980px;
height:300px;
background-color:rgba(100,100,100,0.5);
border-radius:20px;
overflow:hidden;}
div#no1{
background-color:#FF00FF;}
div#no2{
background-color:#FF0;}
div#no3{
background-color:#00F;}
div#no4{
background-color:#0F0;}
div#no5{
background-color:#F00;}
div#no1, div#no2, div#no3, div#no4, div#no5{
width:970px;
height:61px;
transition:all 2s;}
div#no1:hover, div#no2:hover, div#no3:hover, div#no4:hover, div#no5:hover{
height:305px;}
這就是如何實施Eugen 的解決方案。
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
div#photo {
margin:10px 0;
padding:5px;
width:980px;
height:300px;
background-color:rgba(100, 100, 100, 0.5);
border-radius:20px;
overflow:hidden;
}
div#no1 {background-color:#FF00FF;}
div#no2 {background-color:#FF0;}
div#no3 {background-color:#00F;}
div#no4 {background-color:#0F0;}
div#no5 {background-color:#F00;}
div#no1, div#no2, div#no3, div#no4, div#no5 {
width:970px;
height:61px;
transition:all 2s;
}
.exp {height:305px;}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".exp").mouseenter(function () {
$(".exp").not(this).stop();
$(this).prevAll().animate({
height: "0px"
}, 2000, function () {
// Animation complete.
});
$(this).animate({
height: "305px"
}, 2000, function () {
// Animation complete.
});
});
$(".exp").mouseleave(function () {
$(".exp").not(this).stop();
$(".exp").animate({
height: "61px"
}, 200, function () {
// Animation complete.
});
});
}); //END $(document).ready()
</script>
</head>
<body>
<div id="photo">
<div id="no1" class="exp"> </div>
<div id="no2" class="exp"> </div>
<div id="no3" class="exp"> </div>
<div id="no4" class="exp"> </div>
<div id="no5" class="exp"> </div>
</div>
</body>
</html>
我使用了簡單的邏輯，只是將 height:0 應用於除懸停的 div 之外的其他 div。
給每個#noX id 一個相同的類，不管是哪個名字。 例如：.hoverPic。
$( document ).ready(function() {
$('.hoverPic').each(function(){ /*pick each element */
$(this).hover(function(){ /* do something on hover */
$(this).css({ /*set css value */
'width': '100%',
'height': '100%'
});
});
});
});
你可以使用 jquery .mouseenter & .mouseleave事件來完成你的工作。 這里我做了一個例子
您需要將 :hover 選擇器移動到父級並將樣式應用於該狀態的子級。 我對你的目標並不完全清楚，但這就是你的風格。 祝你好運，如果您需要進一步的幫助，請告訴我 :)
div#photo:hover > div{
height:305px;
}
編輯
按照這個http://jsfiddle.net/59Uph/2/嘗試一些東西
我想在用戶將鼠標懸停在登錄元素上時顯示一個 div，但是當用戶將鼠標移動到 ReactJS 中的其他 div 時應該顯示 div
[英]I want to display a div when user hover over a sign in element but div should be displayed when user moves the mouse to that div other in ReactJS
Javascript：我有一個空的div正方形網格，當我將鼠標懸停在它們上方時，我需要鼠標事件來更改每個div的顏色
[英]Javascript: I have a grid of empty div squares I need mouse events to change the color of each div when I mouse over them
我有DIV及其子DIV，我想使用jQuery選擇最后一個DIV。 父級DIVS有ID
[英]I have DIV and its child DIV , i want to select last DIV using jQuery . Parent DIVS have id
我如何設置內聯svg的填充動畫以更改鼠標位置（在父div中）
[英]How do i animate the fill of an inline svg to change with mouse position (in parent div)
我在另一個具有特定寬度的div中有一個div，但我希望子div的寬度為百分比，瀏覽器屏幕大小不是它的父div？
[英]I have a div inside another div with specific width but I want the child div to have width in percentage with browser screen size not its parent div?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.