堆棧內存溢出
  簡體   English   中英

為什么將鼠標懸停在一個CSS上會影響我的其他CSS元素？

[英]Why is hovering over one CSS affecting my other CSS elements?

 原文  2012-06-24 07:38:40  3   2    html/ css3/ css-transitions

問題描述

首先讓我對我的問題表示歉意，因為閱讀時間太長了。 但是我想清楚地解釋我的問題，這就是為什么對此問題進行冗長的描述。 請仔細閱讀我隨附的代碼，並幫助我糾正錯誤。

我是一名業余設計師，基本上不從事網頁設計，但我想設計自己的頁面。 因此，在Google的幫助下並瀏覽了互聯網上的各種教程，我設法設計了自己的頁面。 但是我一直停留在此下載頁面上！ 尤其是下載按鈕。

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>

這是我的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;
}

請指導我，並幫助我解決問題出在哪里以及需要進行哪些更改。 我非常有義務:)問候

2 個解決方案

解決方案1
 1  2012-06-24 08:46:01

將鼠標懸停在一個按鈕元素上不會影響其他按鈕元素。 似乎是這樣，因為您將用於hover效果的動畫p元素放錯了位置。

仔細查看殘破的頁面。 將鼠標懸停在按鈕上時，第三個按鈕上顯示的文件大小會更改。 這是因為當您將鼠標懸停在按鈕＃1上時，按鈕＃1的文件大小p正在被動畫化； 當您將鼠標懸停在按鈕＃2上時，按鈕＃2的文件大小p正在被激活； 當您將鼠標懸停在按鈕＃3上時， 其相應的文件大小p將被設置為動畫。

因此，瀏覽器的功能完全符合您的期望。 僅懸停按鈕的子元素會受到影響/設置動畫。

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

解決方案2
 0 已采納  2012-06-24 08:07:04

在這里工作正常。 為什么為按鈕使用不同的類？ 只需使用class="button"而不是class="button1" ， class="button2"和class="button3" 。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 將鼠標懸停在 div 上時如何更改其他元素的不透明度 | CSS CSS過渡不影響其他元素 當懸停在一個上面時隱藏其他菜單項 - 與我的css過渡混亂 CSS-將鼠標懸停在元素上會影響多個元素 懸停時導航欄中的一個元素會影響其他元素 影響 CSS 中其他元素的過渡屬性 影響其他元素的類的 CSS 屬性 更改CSS樣式而不影響其他元素 使用CSS和大多數相對屬性，將多個HTML元素相互懸停在父元素的中心？ 將鼠標懸停在特定鏈接上時，防止 CSS 下划線 animation，同時允許它用於其他<a>元素</a>
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM