html - 试图让一些盒子悬停但代码的另一部分使它们不起作用并且无法弄清楚为什么

Question

我正在尝试创建一个网上商店，因为我很无聊，这是商店中的一些代码当我删除“managed by”(html)中的部分时，其他图片像应该的那样悬停，但是当我把它放回去时，当我将鼠标悬停在所有其他框上时，关于框移动我一辈子都弄不明白这是怎么回事

html

    <a href=""><img src="img/midlertidigabout.png" /></a>
    <div class="large-12 columns productgalleries">
      <div class="row">

        <div class="large-3 small-5 columns">
          <a href=""> <img src="img/midlertidigt.png">

            <div class="panel">
              <h5>INSERT PRICE HERE</h5>
              <h6 class="subheader">€666</h6>
            </div>
        </div>

        <div class="large-3 small-5 columns">
          <a href=""> <img src="img/midlertidigt.png">
            <div class="panel">
              <h5>INSERT PRICE HERE</h5>
              <h6 class="subheader">€666</h6>
            </div>
        </div>

        <div class="large-3 small-5 columns">
          <a href=""> <img src="img/midlertidigt.png">

            <div class="panel">
              <h5>INSERT PRICE HERE</h5>
              <h6 class="subheader">€666 </h6>
            </div>
        </div>

        <div class="large-3 small-5 columns">
          <a href=""> <img src="img/midlertidigt.png">

            <div class="panel">
              <h5>INSERT PRICE HERE</h5>
              <h6 class="subheader">666 </h6>
            </div>
        </div>

      </div>
    </div>

  </div>

  <!-- End Thumbnails -->



  <!-- Managed By -->
  <div class="row">
    <div class="large-12 columns">
      <div class="panel">
        <div class="row">

          <div class="large-2 small-6 columns">
            <img src="img/midlertidigt.png">
          </div>

          <div class="large-10 small-6 columns">
            <strong> About us  <hr/></strong>

            <h5>
                filler text </h5>
          </div>

        </div>
      </div>
    </div>

    <!-- End Managed By -->

CSS

.slider{
 display:inline-block;
 overflow:hidden;
}

a:before {
 content:attr(rel);
 position:absolute;
 top:20px;
}

a{
 position:relative;
 top:0;
 -webkit-transition-duration: .25s;
 }

a:hover {
 top:-20px; 
 -webkit-transition-duration: .25s;  
}

希望这些信息足够对你有所帮助，祝你有美好的一天

Answer 1

根据您的 CSS，您是在告诉“a”元素移动，而不是像“div”这样的包含元素。你可能会看到盒子移动，因为你没有像应该的那样关闭你的 'a' 标签，除了第一个。我建议改为针对您的容器。根据您的代码，示例可能如下所示:

<div class="large-3 small-5 columns hover">
    <a href=""><img src="img/midlertidigt.png"></a>

    <div class="panel">
        <h5>INSERT PRICE HERE</h5>
        <h6 class="subheader">€666</h6>
    </div>
</div>

像这样使用您的 CSS(将“a”替换为“.hover”:

.hover:before {
    content:attr(rel);
    position:absolute;
    top:20px;
}

.hover{
    position:relative;
    top:0;
    -webkit-transition-duration: .25s;
}

.hover:hover {
    top:-20px; 
    -webkit-transition-duration: .25s;  
}