小贝子编程

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



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

我是一名业余设计师，基本上不喜欢网页设计，但我想设计自己的页面。因此，在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;
}

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

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

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

因此，浏览器正在执行您所期望的操作。只有悬停按钮的子元素受到影响/动画处理。

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

在这里工作正常。为什么要对按钮使用不同的类？只需使用class="button"而不是class="button1"，class="button2"和class="button3"。

相关内容

  • 没有找到相关文章

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium