想要3個div出現時，懸停在另一個

所以這裏是我的代碼到目前爲止。想要3個div出現時，懸停在另一個

<!DOCTYPE html> 

<head> 
<title>An MSU Soiree</title> 

<link rel="stylesheet" type="text/css" href="style.css"> 

</head> 

<html> 
<body> 

<div id="one"> <h2 id="h1"> An MSU Soiree</h2> </div> 

<div id="two"> <h2 id="2h"> Campus</h2> 
<div id="a"> </div> 
<div id="b"> </div> 
<div id="c"> </div> 
</div> 

</body> 
</html>

和我的一些CSS ....它重複所以沒關係。

#2h 
{ 
font-family:Courier; 
text color:white; 
text-align: center; 
} 

#two 
{ 
width:100%; 
height:80px; 
background-color:#FF0056; 
} 

#a 
{ 
width:50px; 
height:50px; 
background-color: white; 
} 

#b 
{ 
width:50px; 
height:50px; 
background-color: white; 
} 


#c 
{ 
width:50px; 
height:50px; 
background-color: white; 

} 



#two:hover 
{ 
height:225px; 
background-color:#FF0056; 
} 

#two: hover div #a, #b, #c 
{ 
display:inline-block; 
}

，從而可以看到，而不被徘徊，盒子寬度是100％，80高度盤旋時，它是225的高度，100％的寬度。但是當徘徊時，我想讓3個div出現在hovered div中，水平分割均勻，並且以高度爲中心。

需要什麼調整來創造這個幻想哈哈？

另外，當我嘗試將一個標頭居中放置這樣一個＃2h時，文本仍然停留在左側。我的另一個小難題。

來源

2013-10-16 Jon Gardocki

第一件事 - 把你的HTML標籤放在''上面。 – cardern

這種效果可以通過兩種方式實現：通過純CSS或JavaScript。

純CSS方法

設置每個內部的div（＃A，＃B，和#C）來display: none;。這將使默認情況下隱藏div（當用戶沒有懸停在父div（#two）上時
創建一個懸浮效果的deceaded選擇器，它看起來像這樣：#two:hover #a, #two:hover #b, #two:hover #c {}。該規則適用於在＃A，＃B，和#C的div只有當用戶將鼠標懸停#two。
裏面的繼承人選，設置內部的div來display: inline-block;。

看看這個簡單的例子（它肯定能使用一些拋光，但你可以看到三個內部divs出現在懸停）：

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 

<style type="text/css"> 
    #a { 
     display: none; 
     background-color: red; 
     width: 30%; 
    } 
    #b { 
     display: none; 
     background-color: blue; 
     width: 30%; 
    } 
    #c { 
     display: none; 
     background-color: yellow; 
     width: 30%; 
    } 
    #two { 
     background-color: #666; 
     border: 3px solid black; 
     width: 100%;  
    } 
    #two:hover #a, #two:hover #b, #two:hover #c { 
     display: inline-block; 
    } 
</style> 
</head> 

<body> 
    <div id="two"> <h2 id="2h"> Campus</h2> 
     <div id="a"> 
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p> 
     </div> 
     <div id="b"> 
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p> 
     </div> 
     <div id="c"> 
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p> 
     </div> 
    </div> 
</body> 
</html>

現在，這種方法很好，因爲它使用純CSS，但缺點是沒有動畫。

jQuery的方法

因此，三個內的div的外觀有點突變。你可以使用JavaScript（或更好的jQuery）來動畫內部div的外觀。一個jQuery腳本的一個非常簡單的例子，動畫懸停效果可能是這個樣子：

$("#two").hover(function() { 
    $("#a").fadeIn(250); 
    $("#b").fadeIn(250); 
    $("#c").fadeIn(250);  
}, function() { 
    $("#a").fadeOut(250); 
    $("#b").fadeOut(250); 
    $("#c").fadeOut(250); 
})

來源

2013-10-16 01:32:14 Toglefritz

謝謝youuuuu。這就是我正在尋找的。非常感謝！ –

這裏是一個的jsfiddle鏈接應該做你想要什麼：http://jsfiddle.net/MP8vE/

這是最相關CSS：

#a { 
    width:33%; 
    height:50px; 
    background-color: white; 
    display:none; 
    float:left; 
} 
#b { 
    width:33%; 
    height:50px; 
    background-color: blue; 
    display:none; 
    float:left; 
} 
#c { 
    width:33%; 
    height:50px; 
    background-color: yellow; 
    display:none; 
    float:left; 
} 
.two:hover div { 
    vertical-align:middle; 
    display:inline-block !important; 
}

來源

2013-10-16 01:40:06 cardern

想要3個div出現時，懸停在另一個

回答

相關問題