CSS：懸停不按我期望的方式

我有一個div，它屬於類.stickyNote，在該div內，我有一個<h1>標記作爲stickyNote的標題和<p>標記作爲stickynote的內容。就像這樣：<div class="stickyNote"> <h1>Drag Me</h1> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum..</p> </div>-->CSS：懸停不按我期望的方式

的stickyNote類的樣式，這樣，當一個懸停，它會多一點到達前臺，有了這個CSS：

.stickyNote :hover,.stickyNote :focus{ 
    -moz-box-shadow:10px 10px 7px rgba(0,0,0,.7); 
    -webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7); 
    box-shadow:10px 10px 7px rgba(0,0,0,.7); 
    -webkit-transform: scale(1.25); 
    -moz-transform: scale(1.25); 
    -o-transform: scale(1.25); 
    position:relative; 
    z-index:5; 
}

然而，當我將鼠標懸停在stickyNote div <h1>和<p>部分總是獨立地前臺，即當我將鼠標懸停在<h1>上時，它會到達前臺，並且當我將鼠標懸停在<p>上時，它會到達前臺，但不會是整個stickyNote。我錯過了什麼？ div整體。

來源

2012-11-01 TheBaj

你之間'.stickyNote'和'空間：hover'所以你的CSS是說應用這種風格正在徘徊.stickyNote'的'孩子。 – Shmiddty

那就是留下。擺脫空間，noob。 – Shmiddty

一個noob我真的是。但我沒有任何徘徊的孩子？（雖然你的解決方案仍然有效） – TheBaj

-1

.stickyNote :hover, .stickyNote :focus{

不是逗號第一

.stickyNote :hover .stickyNote :focus{

來源

2012-11-01 20:44:23

這似乎沒有任何區別 – TheBaj

不是逗號不是必需的 –

CSS：懸停不按我期望的方式

回答

相關問題