爲什麼懸停在一個影響其他CSS元素的CSS上？

首先讓我對我的問題表示歉意，因爲我的問題可能太長而無法閱讀。但我想清楚地解釋我的問題，這就是爲什麼這個問題的冗長描述。請仔細閱讀我附上的代碼，並幫助我糾正錯誤。爲什麼懸停在一個影響其他CSS元素的CSS上？

我是一個業餘設計師誰基本上沒有進入網頁設計，但我想設計自己的網頁。所以藉助谷歌的幫助，並通過互聯網上的各種教程，我設法設計了我的網頁。但我被困在這個下載頁面！特別是使用下載按鈕。

http://dl.dropbox.com/u/20461226/download%20page.jpg

這是我打算讓我的下載頁面。當用戶懸停在我們雜誌的任何特定版本的任何特定下載按鈕上時，機翼將打開，一個在下載按鈕&的頂部，另一個在底部。當用戶點擊按鈕時，他/她將能夠下載該特定雜誌版本的壓縮.RAR版本。我學會了從設計「http://designshack.net/articles/css/downloadbutton/」此下載按鈕，這就是效果將會如何：「http://designshack.net/tutorialexamples/animatedDownload/index.html」

我設法成功打造個人下載每個版本的按鈕，在CSS中給出它們的確切位置。但是，當我嘗試將頁面的所有按鈕集成到一個HTML和一個CSS中時，一切都會出錯。也就是說，當我在第一個下載按鈕之上擺弄時，而不是第一個下載按鈕打開的翅膀，翅膀在最後一個按鈕處打開！

這是我的HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<link href="button.css" type="text/css" rel="stylesheet" /> 
</head> 

<body> 
<div class="button1"> 
    <a href="#">Download</a> 
    <p class="top">Click to begin</p> 
    <p class="bottom">7.54 MB .RAR</p> 
</div> 
<body> 
<div class="button2"> 
    <a href="#">Download</a> 
    <p class="top">Click to begin</p> 
    <p class="bottom">7.8 MB .RAR</p> 
</div> 
<div class="button3"> 
    <a href="#">Download</a> 
    <p class="top">Click to begin</p> 
    <p class="bottom">7.05 MB .RAR</p> 
</div> 

</body> 
</html>

THIS IS MY CSS：

.button1 a { 
    display: block; 
    position:absolute; 
    left:430px; 
    top:410px; 
    height: 28px; 
    width: 115px; 
    background: #22232e; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
     border-radius: 4px; 
     -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.2); 
    -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.2); 
     box-shadow: 0px 0px 8px rgba(0,0,0,0.2); 


background: -moz-linear-gradient(top, #22232e 0%, #623043 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#22232e), color-stop(100%,#623043)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #22232e 0%,#623043 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #22232e 0%,#623043 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #22232e 0%,#623043 100%); /* IE10+ */ 
background: linear-gradient(top, #22232e 0%,#623043 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#22232e', endColorstr='#623043',GradientType=0); /* IE6-9 */ 


    /*TYPE*/ 
    color: white; 
    font: bold 11px/28px Helvetica, Verdana, sans-serif; 
    text-decoration: none; 
    text-align: center; 
    text-transform: uppercase; 
} 

p { 
    background: #5a8a37; 
    display: block; 
    height: 25px; 
    width: 105px; 
    margin: 0px 0 0 5px; 

    /*TYPE*/ 
    text-align: center; 
    font: bold 10px/25px Helvetica, Verdana, sans-serif; 
    color: #0e1807; 

    /*POSITION*/ 
    position:absolute; 
    left:430px; 
    top:410px; 
    z-index: -1; 

    /*CSS3*/ 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
      border-radius: 3px; 

    -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2); 
    -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2); 
      box-shadow: 2px 2px 8px rgba(0,0,0,0.2); 

-webkit-transition: all 0.4s ease; 
    -moz-transition: all 0.4s ease; 
     -o-transition: all 0.4s ease; 
     -ms-transition: all 0.4s ease; 
      transition: all 0.4s ease;   
} 


.button1:hover .top { 
    margin: -23px 0 0 5px; 
    line-height: 25px; 
} 

.button1:hover .bottom { 
    margin: 25px 0 0 5px; 
} 

.button1 a:active { 
background: #22232e; 
background: -moz-linear-gradient(top, #22232e 0%, #623043 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#22232e), color-stop(100%,#623043)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #22232e 0%,#623043 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #22232e 0%,#623043 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #22232e 0%,#623043 100%); /* IE10+ */ 
background: linear-gradient(top, #22232e 0%,#623043 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#22232e', endColorstr='#623043',GradientType=0); /* IE6-9 */ 
} 

/*Pulls in Wings*/ 
.button1:active .bottom { 
    margin: 25px 0 0 5px; 
} 

.button1:active .top { 
    margin: -23px 0 0 5px; 
} 


.button2 a { 

    display: block; 
    position:absolute; 
    left:632px; 
    top:410px; 
    height: 28px; 
    width: 115px; 
    background: #22232e; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
     border-radius: 4px; 
     -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.2); 
    -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.2); 
     box-shadow: 0px 0px 8px rgba(0,0,0,0.2); 


background: -moz-linear-gradient(top, #22232e 0%, #623043 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#22232e), color-stop(100%,#623043)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #22232e 0%,#623043 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #22232e 0%,#623043 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #22232e 0%,#623043 100%); /* IE10+ */ 
background: linear-gradient(top, #22232e 0%,#623043 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#22232e', endColorstr='#623043',GradientType=0); /* IE6-9 */ 


    /*TYPE*/ 
    color: white; 
    font: bold 11px/28px Helvetica, Verdana, sans-serif; 
    text-decoration: none; 
    text-align: center; 
    text-transform: uppercase; 
} 

p { 
    background: #5a8a37; 
    display: block; 
    height: 25px; 
    width: 105px; 
    margin: 0px 0 0 5px; 

    /*TYPE*/ 
    text-align: center; 
    font: bold 10px/25px Helvetica, Verdana, sans-serif; 
    color: #0e1807; 

    /*POSITION*/ 
    position:absolute; 
    left:632px; 
    top:410px; 
    z-index: -1; 

    /*CSS3*/ 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
      border-radius: 3px; 

    -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2); 
    -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2); 
      box-shadow: 2px 2px 8px rgba(0,0,0,0.2); 

-webkit-transition: all 0.4s ease; 
    -moz-transition: all 0.4s ease; 
     -o-transition: all 0.4s ease; 
     -ms-transition: all 0.4s ease; 
      transition: all 0.4s ease;   
} 


.button2:hover .top { 
    margin: -23px 0 0 5px; 
    line-height: 25px; 
} 

.button2:hover .bottom { 
    margin: 25px 0 0 5px; 
} 

.button2 a:active { 
background: #22232e; 
background: -moz-linear-gradient(top, #22232e 0%, #623043 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#22232e), color-stop(100%,#623043)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #22232e 0%,#623043 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #22232e 0%,#623043 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #22232e 0%,#623043 100%); /* IE10+ */ 
background: linear-gradient(top, #22232e 0%,#623043 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#22232e', endColorstr='#623043',GradientType=0); /* IE6-9 */ 
} 

/*Pulls in Wings*/ 
.button2:active .bottom { 
    margin: 25px 0 0 5px; 
} 

.button2:active .top { 
    margin: -23px 0 0 5px; 
} 


.button3 a { 

    display: block; 
    position:absolute; 
    left:833px; 
    top:410px; 
    height: 28px; 
    width: 115px; 
    background: #22232e; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
     border-radius: 4px; 
     -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.2); 
    -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.2); 
     box-shadow: 0px 0px 8px rgba(0,0,0,0.2); 


background: -moz-linear-gradient(top, #22232e 0%, #623043 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#22232e), color-stop(100%,#623043)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #22232e 0%,#623043 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #22232e 0%,#623043 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #22232e 0%,#623043 100%); /* IE10+ */ 
background: linear-gradient(top, #22232e 0%,#623043 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#22232e', endColorstr='#623043',GradientType=0); /* IE6-9 */ 


    /*TYPE*/ 
    color: white; 
    font: bold 11px/28px Helvetica, Verdana, sans-serif; 
    text-decoration: none; 
    text-align: center; 
    text-transform: uppercase; 
} 

p { 
    background: #5a8a37; 
    display: block; 
    height: 25px; 
    width: 105px; 
    margin: 0px 0 0 5px; 

    /*TYPE*/ 
    text-align: center; 
    font: bold 10px/25px Helvetica, Verdana, sans-serif; 
    color: #0e1807; 

    /*POSITION*/ 
    position:absolute; 
    left:833px; 
    top:410px; 
    z-index: -1; 

    /*CSS3*/ 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
      border-radius: 3px; 

    -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2); 
    -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2); 
      box-shadow: 2px 2px 8px rgba(0,0,0,0.2); 

-webkit-transition: all 0.4s ease; 
    -moz-transition: all 0.4s ease; 
     -o-transition: all 0.4s ease; 
     -ms-transition: all 0.4s ease; 
      transition: all 0.4s ease;   
} 


.button3:hover .top { 
    margin: -23px 0 0 5px; 
    line-height: 25px; 
} 

.button3:hover .bottom { 
    margin: 25px 0 0 5px; 
} 

.button3 a:active { 
background: #22232e; 
background: -moz-linear-gradient(top, #22232e 0%, #623043 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#22232e), color-stop(100%,#623043)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #22232e 0%,#623043 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #22232e 0%,#623043 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #22232e 0%,#623043 100%); /* IE10+ */ 
background: linear-gradient(top, #22232e 0%,#623043 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#22232e', endColorstr='#623043',GradientType=0); /* IE6-9 */ 
} 

/*Pulls in Wings*/ 
.button3:active .bottom { 
    margin: 25px 0 0 5px; 
} 

.button3:active .top { 
    margin: -23px 0 0 5px; 
}

請指導我，幫助我哪裏出了問題，需要做什麼樣的變化。我將非常有義務:) Regards

來源

2012-06-24 Amit Pattnaik

在我將HTML和CSS渲染到腦海之前，您可以上傳一個現場演示嗎？ – Blender

好吧，讓我試試上傳這個頁面的演示。我很快就會回到這個鏈接。 –

工程正常here。你爲什麼使用不同的按鈕類？只需使用class="button"而不是class="button1",class="button2"和class="button3"。

來源

2012-06-24 08:07:04 Bluefire

非常感謝@bluefire這麼快的回覆。嗯，其實我對CSS感到困惑，不管是用button1，button2等還是用原來的class =「button」。讓我嘗試將您對代碼所做的更改合併到一起。再次感謝大家:) 熱烈的問候 –

如果你真的想使用不同的類，[在這裏你]（http://jsfiddle.net/JGCrh/）。 – Bluefire

@AmitPattnaik點擊答案旁邊的空白勾號以接受它：D – Bluefire

將鼠標懸停在一個按鈕元素上不會影響其他按鈕元素。這只是因爲你錯過了你用於hover效果的動畫p元素。

仔細查看破損的頁面。當您將鼠標懸停在按鈕上時，第三個按鈕上顯示的文件大小會發生變化。這是因爲當您將鼠標懸停在按鈕＃1上時，按鈕＃1的文件大小p正在進行動畫處理;當您將鼠標懸停在按鈕＃2上時，按鈕＃2的文件大小爲p正在製作動畫;並且當您將鼠標懸停在按鈕＃3上時，其其對應的文件大小p正在製作動畫。

因此，瀏覽器正在做你期望的。只有懸停按鈕的子元素纔會受到影響/動畫。

你真正的問題是你的CSS告訴他們所有彈出第三個按鈕。設置p.top和p.bottom元素的絕對位置時，最可能發生此錯誤。如果您通過Firebug或Chrome的DOM檢查器檢查這些DOM元素，則會看到它們全部放在按鈕＃3後面。因此，當它們彈出時，它們在按鈕＃3的上方/下方彈出。因此，當您將鼠標懸停在按鈕＃1 &＃2上時，它看起來像＃3按鈕受到了影響。

來源

2012-06-24 08:46:01

非常抱歉，剛剛進入本網站時，我沒有足夠的滾動以查找您的答覆。是的，我已經注意到你在這裏指出的那些東西，但我無法擺脫它。 –

但是，感謝Bluefire，現在我的問題得到了解決，我感到如此輕鬆愉快。我可能看起來像我的行爲像一個小孩子，但這就是我現在的感受，一個剛剛被巧克力天賦的孩子：D –

爲什麼懸停在一個影響其他CSS元素的CSS上？

回答

相關問題