2

让我首先为我的问题可能太长而无法阅读表示歉意。但是我想清楚地解释我的问题，这就是为什么要对这个问题进行冗长的描述。请仔细阅读我附上的代码，请帮助我纠正错误。

我是一个业余设计师，基本上不喜欢网页设计，但我想设计自己的页面。所以在谷歌的帮助下，通过互联网上的各种教程，我设法设计了我的页面。但我被困在这个下载页面！特别是使用下载按钮。

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;
}

请指导我并帮助我找出问题所在以及需要进行哪些更改。我将非常感激:) 问候

4

2 回答 2

1

将鼠标悬停在一个按钮元素上不会影响其他按钮元素。看起来就是这样，因为您放错了p用于hover效果的动画元素。

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

所以浏览器正在做你所期望的。只有悬停按钮的子元素受到影响/动画。

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

于 2012-06-24T08:46:01.310 回答
0

在这里工作正常。为什么你对按钮使用不同的类？只需使用class="button"代替class="button1",class="button2"和class="button3"。

于 2012-06-24T08:07:04.563 回答