Question

让我首先向我的道歉，因为我的问题可能太长，无法阅读。但我想清楚地解释我的问题，这就是为什么这个问题的冗长描述。请仔细阅读我附上的代码，并帮我纠正错误。

我是一名业余设计师，基本上不是网页设计，但我想设计自己的页面。因此，借助Google的帮助并在互联网上浏览各种教程，我设法设计了自己的网页。但我被困在这个下载页面！特别是下载按钮。

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

这就是我打算下载页面的方式。当用户将鼠标悬停在我们杂志的任何特定版本的任何特定下载按钮上时，机翼将打开，一个位于下载按钮和顶部的顶部。另一个在底部。当用户点击按钮时，他/她将能够下载特定杂志版本的compressed.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;
}

请指导我并帮助我解决问题所在以及需要做哪些更改。我将非常感激:) 此致

Answer 1

将鼠标悬停在一个按钮元素上不会影响其他按钮元素。这似乎就是这样，因为您错误地放置了p效果所使用的动画hover元素。

仔细查看损坏的页面。将鼠标悬停在按钮上时，第3个按钮上显示的文件大小会发生变化。这是因为当您将鼠标悬停在按钮＃1上时，按钮＃1的文件大小p正在被动画化;当您将鼠标悬停在按钮＃2上时，按钮＃2的文件大小p正在设置动画;当您将鼠标悬停在按钮＃3上时，其对应的文件大小p正在设置动画。

因此，浏览器正在按照您的预期进行操作。只有悬停按钮的子元素受到影响/动画。

你真正的问题是你的CSS告诉他们所有人都弹出第3个按钮。在设置p.top和p.bottom元素的绝对位置时，最可能发生此错误。如果您通过Firebug或Chrome的DOM检查器检查这些DOM元素，您会发现它们全部放在按钮＃3后面。因此，当它们弹出时，它们会弹出按钮＃3的上方/下方。因此，当您将鼠标悬停在按钮＃1＆amp;上时，按钮＃3会受到影响＃2。

Answer 2

工作正常here。为什么要为按钮使用不同的类？只需使用class="button"代替class="button1"，class="button2"和class="button3"。

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

2 个答案: