2

最初に、質問が長すぎて読めない可能性があることをお詫び申し上げます。しかし、私は自分の問題を明確に説明したかったので、この質問の長い説明があります。私が添付したコードを確認し、間違いを訂正するのを手伝ってください。

私は基本的にウェブデザインには興味がないアマチュアデザイナーですが、自分のページをデザインしたかったのです。そこで、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内の正確な場所を指定して、エディションごとに個別のダウンロードボタンを正常に作成できました。しかし、ページのすべてのボタンを1つのhtmlと1つの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

1 つのボタン要素にカーソルを合わせても、他のボタン要素には影響しません。p効果に使用しているアニメーション要素を置き忘れたため、そのように見えますhover。

壊れたページをもっとよく見てください。ボタンにカーソルを合わせると、3 番目のボタンに表示されるファイルサイズが変わります。これは、ボタン #1 にカーソルを合わせると、ボタン #1 のファイルサイズpがアニメーション化されるためです。ボタン #2 にカーソルを合わせると、ボタン #2 のファイルサイズpがアニメーション化されます。ボタン #3 にカーソルを合わせると、対応するファイルサイズpがアニメーション化されます。

したがって、ブラウザはまさに期待通りの動作をしています。ホバーされたボタンの子要素のみが影響を受けてアニメーション化されています。

あなたの本当の問題は、CSS がそれらすべてに 3 番目のボタンの上にポップアップするように指示していることです。p.topこの間違いは、要素と要素の絶対位置を設定するときに発生する可能性が最も高いp.bottomです。これらの DOM 要素を Firebug または Chrome の 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 に答える