Question

我正在尝试构建一个响应式3列网格。在这方面没问题。之所以出现这个问题，是因为我希望在每个方框的顶部和底部都有2个DIV内容。我无法添加图片，但如果您想更好地了解我的意思，您可以复制并粘贴以下链接：

http://i62.tinypic.com/2h2nj4m.jpg

我可以拥有那两个顶部和底部的盒子，但是，这里是这笔交易：

我希望顶盒在加载时完全隐藏
我希望底部框在加载时部分隐藏
我想要两个盒子在悬停时显示和交换位置，因此底部框将位于顶部，顶部框将位于底部
我希望两个方框在改变位置时改变颜色
我想让它跨浏览器工作

所以，我在代码上做了很多工作，我得到了这个：

＆＃13;

#grid {
  max-width: 1000px;
  margin: 20px auto;
  padding: 0 20px
}
#grid li {
  display: block;
  width: 300px;
  height: 220px;
  margin: 8px;
  float: left;
  overflow: hidden;
  border: 1px solid #ccc;
}
.cook {
  background: #333 url(images/th1.jpg)
}
.computer {
  background: #555 url(images/th2.jpg)
}
.yoga {
  background: #777 url(images/th3.jpg)
}
.blacktrans {
  transition: 0.8s all ease-in-out;
  -webkit-transition: 0.8s all ease-in-out;
  z-index: 10000;
  display: block;
  background: rgba(255, 255, 255, 0.8);
  color: #333;
  padding: 5px;
  width: 100%;
  height: 40px;
  z-index: 1000;
  position: absolute;
  top: 180px;
}
.blacktrans:hover {
  display: block;
  background: rgba(0, 0, 0, 0.8);
  top: 0;
  height: 80px
}
.salmon {
  transition: 0.8s all ease-in-out;
  -webkit-transition: 0.8s all ease-in-out;
  display: block;
  width: 100%;
  height: 60px;
  background: rgba(0, 51, 102, 0.8);
  color: #fff;
  font-size: 24px;
  position: absolute;
  top: -180px;
}
.salmon .price {
  font-size: 24px;
  padding: 10px
}
.classbox {
  display: block;
  width: 300px;
  height: 220px;
  position: relative;
  transition: 0.8s all ease-in-out;
  -webkit-transition: 0.8s all ease-in-out;
  padding-top: 180px;
}
.classbox:hover {
  opacity: 1;
  padding-top: 0;
}
.blacktrans h3 {
  font-size: 20px;
}
.blacktrans h3 a {
  color: #333;
  padding: 0 5px;
}
.classbox .salmon {
  top: 160px;
}
.classbox:hover .blacktrans h3 a {
  color: #fff;
  padding: 0 5px;
}
.time {
  color: #3498db;
  font-size: 18px;
  text-align: left;
  padding: 0 5px;
}
.seemore {
  width: 9px;
  height: 15px;
  position: absolute;
  top: 10px;
  right: 5px;
  opacity: 0;
  transition: 1.5s all ease-in-out
}
.classbox:hover > .blacktrans > .seemore {
  opacity: 1;
}
.boxbg {
  display: inline-block;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 0;
}

＆＃13;

<!-- START GRID -->
<div id="grid">
  <ul>
    <li class="yoga">
      <div class="classbox">
        <div class="blacktrans">
          <img class="seemore" src="images/arrow_more.png" alt="see more" />
          <h3><a href="view2.html">Yoga Asana</a></h3>

          <p class="time">6:30 @ 7:00 PM</p>
        </div>
        <div class="salmon">
          <p class="price">$20</p>
        </div>
        <div class="boxbg">
          <a href="view2.html">
            <img src="images/classbox.png" alt="" />
          </a>
        </div>
      </div>
    </li>
    <!-- end item -->
    <li class="computer">
      <div class="classbox">
        <div class="blacktrans">
          <img class="seemore" src="images/arrow_more.png" alt="see more" />
          <h3><a href="view2.html">HTML5 and CSS3 Basics</a></h3>

          <p class="time">4:30 @ 5:30 PM</p>
        </div>
        <div class="salmon">
          <p class="price">$30</p>
        </div>
        <div class="boxbg">
          <a href="view2.html">
            <img src="images/classbox.png" alt="" />
          </a>
        </div>
      </div>
    </li>
    <!-- end item -->
    <li class="cook">
      <div class="classbox">
        <div class="blacktrans">
          <img class="seemore" src="images/arrow_more.png" alt="see more" />
          <h3><a href="view2.html">Cookin 101</a></h3>

          <p class="time">6:30 @ 7:00 PM</p>
        </div>
        <div class="salmon">
          <p class="price">$40</p>
        </div>
        <div class="boxbg">
          <a href="view2.html">
            <img src="images/classbox.png" alt="" />
          </a>
        </div>
      </div>
    </li>
    <!-- end item -->
    <li class="yoga">
      <div class="classbox">
        <div class="blacktrans">
          <img class="seemore" src="images/arrow_more.png" alt="see more" />
          <h3><a href="view2.html">Yoga Asana</a></h3>

          <p class="time">6:30 @ 7:00 PM</p>
        </div>
        <div class="salmon">
          <p class="price">$20</p>
        </div>
        <div class="boxbg">
          <a href="view2.html">
            <img src="images/classbox.png" alt="" />
          </a>
        </div>
      </div>
    </li>
    <!-- end item -->
    <li class="computer">
      <div class="classbox">
        <div class="blacktrans">
          <img class="seemore" src="images/arrow_more.png" alt="see more" />
          <h3><a href="view2.html">HTML5 and CSS3 Basics</a></h3>

          <p class="time">4:30 @ 5:30 PM</p>
        </div>
        <div class="salmon">
          <p class="price">$30</p>
        </div>
        <div class="boxbg">
          <a href="view2.html">
            <img src="images/classbox.png" alt="" />
          </a>
        </div>
      </div>
    </li>
    <!-- end item -->
    <li class="cook">
      <div class="classbox">
        <div class="blacktrans">
          <img class="seemore" src="images/arrow_more.png" alt="see more" />
          <h3><a href="view2.html">Cookin 101</a></h3>

          <p class="time">6:30 @ 7:00 PM</p>
        </div>
        <div class="salmon">
          <p class="price">$40</p>
        </div>
        <div class="boxbg">
          <a href="view2.html">
            <img src="images/classbox.png" alt="" />
          </a>
        </div>
      </div>
    </li>
    <!-- end item -->
    <li class="yoga">
      <div class="classbox">
        <div class="blacktrans">
          <img class="seemore" src="images/arrow_more.png" alt="see more" />
          <h3><a href="view2.html">Yoga Asana</a></h3>

          <p class="time">6:30 @ 7:00 PM</p>
        </div>
        <div class="salmon">
          <p class="price">$20</p>
        </div>
        <div class="boxbg">
          <a href="view2.html">
            <img src="images/classbox.png" alt="" />
          </a>
        </div>
      </div>
    </li>
    <!-- end item -->
    <li class="computer">
      <div class="classbox">
        <div class="blacktrans">
          <img class="seemore" src="images/arrow_more.png" alt="see more" />
          <h3><a href="view2.html">HTML5 and CSS3 Basics</a></h3>

          <p class="time">4:30 @ 5:30 PM</p>
        </div>
        <div class="salmon">
          <p class="price">$30</p>
        </div>
        <div class="boxbg">
          <a href="view2.html">
            <img src="images/classbox.png" alt="" />
          </a>
        </div>
      </div>
    </li>
    <!-- end item -->
    <li class="cook">
      <div class="classbox">
        <div class="blacktrans">
          <img class="seemore" src="images/arrow_more.png" alt="see more" />
          <h3><a href="view2.html">Cookin 101</a></h3>

          <p class="time">6:30 @ 7:00 PM</p>
        </div>
        <div class="salmon">
          <p class="price">$40</p>
        </div>
        <div class="boxbg">
          <a href="view2.html">
            <img src="images/classbox.png" alt="" />
          </a>
        </div>
      </div>
    </li>
    <!-- end item -->
    <li class="yoga">
      <div class="classbox">
        <div class="blacktrans">
          <img class="seemore" src="images/arrow_more.png" alt="see more" />
          <h3><a href="view2.html">Yoga Asana</a></h3>

          <p class="time">6:30 @ 7:00 PM</p>
        </div>
        <div class="salmon">
          <p class="price">$20</p>
        </div>
        <div class="boxbg">
          <a href="view2.html">
            <img src="images/classbox.png" alt="" />
          </a>
        </div>
      </div>
    </li>
    <!-- end item -->
    <li class="computer">
      <div class="classbox">
        <div class="blacktrans">
          <img class="seemore" src="images/arrow_more.png" alt="see more" />
          <h3><a href="view2.html">HTML5 and CSS3 Basics</a></h3>

          <p class="time">4:30 @ 5:30 PM</p>
        </div>
        <div class="salmon">
          <p class="price">$30</p>
        </div>
        <div class="boxbg">
          <a href="view2.html">
            <img src="images/classbox.png" alt="" />
          </a>
        </div>
      </div>
    </li>
    <!-- end item -->
    <li class="cook">
      <div class="classbox">
        <div class="blacktrans">
          <img class="seemore" src="images/arrow_more.png" alt="see more" />
          <h3><a href="view2.html">Cookin 101</a></h3>

          <p class="time">6:30 @ 7:00 PM</p>
        </div>
        <div class="salmon">
          <p class="price">$40</p>
        </div>
        <div class="boxbg">
          <a href="view2.html">
            <img src="images/classbox.png" alt="" />
          </a>
        </div>
      </div>
    </li>
    <!-- end item -->
  </ul>
  <hr/>
</div>
<!-- /grid -->
<!-- END GRID -->

＆＃13;

您也可以在jsfiddle中看到它。

所以，正如你所看到的，它并不起作用。在某些时候，我让其中一个盒子工作，然后我改变了一些东西而且无法回来。所以，我知道我已经接近了，我无法想象如何继续。

Answer 1

我不完全确定我是否理解这个问题，因为它有几个部分，但请查看this fiddle并告诉我这是否是您正在寻找的。

至于你的代码，你是对的，你非常接近，所以你不需要对你的HTML进行任何更改，只需对CSS进行一些更改，如下所示：

#grid {
    max-width:1000px;
    margin:20px auto;
    padding:0 20px
}
#grid li {
    display:block;
    width:300px;
    height: 220px;
    margin:10px 8px;
    float:left;
    overflow:hidden;
    border:1px solid #ccc;
}
.cook {
    background:#333 url(images/th1.jpg)
}
.computer {
    background:#555 url(images/th2.jpg)
}
.yoga {
    background:#777 url(images/th3.jpg)
}
.blacktrans {
    transition:0.8s all ease-in-out;
    z-index:10000;
    display:block;
    background:rgba(255, 255, 255, 0.8);
    color:#333;
    padding:0 5px;
    width:100%;
    height:40px;
    z-index:1000;
    position:absolute;
    top:180px;
}
.classbox:hover > .blacktrans {
    display:block;
    background:rgba(0, 0, 0, 0.8);
    top:0;
    height:80px
}
.salmon {
    transition:0.8s all ease-in-out;
    display:block;
    width:100%;
    height:60px;
    background:rgba(0, 51, 102, 0.8);
    color:#fff;
    font-size:24px;
    position:absolute;
    top:-180px;
}
.salmon .price {
    font-size:24px;
    padding:10px
}
.classbox {
    display:block;
    width:300px;
    height:220px;
    position:relative;
    transition:0.8s all ease-in-out;
    padding-top:180px;
}
.classbox:hover {
    opacity:1;
    padding-top:0;
}
.blacktrans h3 {
    font-size:20px;
    padding:0;
    margin:5px auto;
    text-transform:uppercase;
}
.blacktrans h3 a {
    color:#333;
    padding:0 5px;
    text-decoration:none;
}
.classbox:hover > .salmon {
    top:160px;
}
.classbox:hover > .blacktrans h3 a {
    color:#fff;
    padding:0 5px;
}
.time {
    color:#3498db;
    font-size:18px;
    text-align:left;
    padding:0 5px;
}
.seemore {
    width:9px;
    height:15px;
    position:absolute;
    top:10px;
    right:5px;
    opacity:0;
    transition:1.5s all ease-in-out
}
.classbox:hover > .blacktrans > .seemore {
    opacity:1;
}
.boxbg {
    display:inline-block;
    width:100%;
    height:100%;
    position:absolute;
    bottom:0;
    left:0;
    z-index:0;
}

您遇到的主要问题是您需要定位整个.classbox元素以应用:hover行为，因此您可以看到，我甚至没有更改您的样式（或者可能是微不足道的），我所做的改变是构造。希望这是你想要的。

我如何在div中为这些div设置动画？

1 个答案: