为什么将鼠标悬停在一个CSS上会影响我的其他CSS元素？

Question

Let me first tender my apologies for my question might be too long to read. 首先让我对我的问题表示歉意，因为阅读时间太长了。 But I wanted to clearly explain my problem and that's why is the lengthy description of this question. 但是我想清楚地解释我的问题，这就是为什么对此问题进行冗长的描述。 Please go through the codes that I have attached and please help me correct the mistakes. 请仔细阅读我随附的代码，并帮助我纠正错误。

I am an amateur designer who isn't basically into web designing but I wanted to design my own page. 我是一名业余设计师，基本上不从事网页设计，但我想设计自己的页面。 So taking the help of Google and going through various tutorials on the internet, I have managed to design my pages. 因此，在Google的帮助下并浏览了互联网上的各种教程，我设法设计了自己的页面。 But I am stuck at this DOWNLOAD PAGE! 但是我一直停留在此下载页面上！ especially with the DOWNLOAD BUTTONS. 尤其是下载按钮。

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

This is how I intend to have my download page. 这就是我打算拥有下载页面的方式。 When an user hovers over any particular DOWNLOAD BUTTON of any particular edition of our magazine, the wings will open up, one at the top of the download button & the other at the bottom. 当用户将鼠标悬停在我们杂志的任何特定版本的任何特定下载按钮上时，护翼将打开，一个在下载按钮的顶部，另一个在底部。 And when the user clicks on the button, he/she will be able to download the compressed.RAR version of that particular magazine edition. 当用户单击按钮时，他/她将能够下载该特定杂志版本的压缩RAR版本。 I learnt designing this download button from " http://designshack.net/articles/css/downloadbutton/ " and this is how the effect will be : "http://designshack.net/tutorialexamples/animatedDownload/index.html " 我从“ http://designshack.net/articles/css/downloadbutton/ ”中学到了设计此下载按钮的方法，效果如下：“ http://designshack.net/tutorialexamples/animatedDownload/index.html”

I managed to successfully build the individual download buttons for each edition, giving their exact locations in the CSS. 我设法为每个版本成功构建了单独的下载按钮，并在CSS中提供了它们的确切位置。 But when I try to integrate all the buttons for the page into one html and one CSS, everything goes awry. 但是，当我尝试将页面的所有按钮集成到一个html和一个CSS中时，一切都会出错。 ie WHEN I HOVER OVER THE 1st DOWNLOAD BUTTON, instead of the wings opening up for that particular 1st download button, the wings open up at the last button! 即，当我将鼠标悬停在第一个下载按钮上时，而不是为该特定的第一个下载按钮打开机翼，而是在最后一个按钮处打开机翼！

This is my HTML : 这是我的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 : 这是我的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;
}

Please guide me and help me out where is the problem and what changes need to be done. 请指导我，并帮助我解决问题出在哪里以及需要进行哪些更改。 I shall be highly obliged :) Regards 我非常有义务:)问候

Answer 1

Hovering over one button element is not affecting the other button elements. 将鼠标悬停在一个按钮元素上不会影响其他按钮元素。 It just seems that way because you've misplaced the animated p elements you're using for the hover effect. 似乎是这样，因为您将用于hover效果的动画p元素放错了位置。

Look more closely at the broken page. 仔细查看残破的页面。 When you hover over the buttons, the filesize shown on the 3rd button changes. 将鼠标悬停在按钮上时，第三个按钮上显示的文件大小会更改。 That's because when you hover over button #1, button #1's filesize p is being animated; 这是因为当您将鼠标悬停在按钮＃1上时，按钮＃1的文件大小p正在被动画化； when you hover over button #2, button #2's filesize p is being animated; 当您将鼠标悬停在按钮＃2上时，按钮＃2的文件大小p正在被激活； and when you hover over button #3, its corresponding filesize p is being animated. 当您将鼠标悬停在按钮＃3上时，其相应的文件大小p将被设置为动画。

So the browser is doing exactly what you would expect. 因此，浏览器的功能完全符合您的期望。 Only the child elements of the hovered-over button are being affected/animated. 仅悬停按钮的子元素会受到影响/设置动画。

Your real problem is that your CSS is telling them all to pop up over the 3rd button. 真正的问题是CSS告诉它们全部弹出到第3个按钮上方。 This mistake most-likely occured when setting the absolute position of the p.top and p.bottom elements. 设置p.top和p.bottom元素的绝对位置时，最有可能发生此错误。 If you inspect these DOM elements via Firebug or Chrome's DOM inspector, you'll see that they're all being placed behind button #3. 如果您通过Firebug或Chrome的DOM检查器检查这些DOM元素，您会发现它们都位于按钮＃3的后面。 Therefore, when they pop out, they pop out above/below button #3. 因此，当它们弹出时，它们弹出在按钮＃3的上方/下方。 So it looks like button #3 is being affected when you hover over button #1 & #2. 因此，当您将鼠标悬停在按钮＃1和＃2上时，似乎按钮3受到了影响。

Answer 2

Works fine here . 在这里工作正常。 Why are you using different classes for the buttons? 为什么为按钮使用不同的类？ Just use class="button" instead of class="button1" , class="button2" and class="button3" . 只需使用class="button"而不是class="button1" ， class="button2"和class="button3" 。

为什么将鼠标悬停在一个CSS上会影响我的其他CSS元素？

问题描述

2 个解决方案

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

解决方案2
0 已采纳 2012-06-24 08:07:04

为什么将鼠标悬停在一个CSS上会影响我的其他CSS元素？

问题描述

2 个解决方案

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

解决方案2 0 已采纳 2012-06-24 08:07:04

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

解决方案2
0 已采纳 2012-06-24 08:07:04