Question

我已经设置了以下html和css来创建一个在悬停时更改内容的div。我想添加一个简单的过渡到悬停，如下所示：

transition: .5s ease;

但我没有成功让它发挥作用。

我的HTML如下：

<div class="top-box">
<div style="text-align: center;">
<i class="fa fa-laptop round-background"><!-- icon --></i>
<hr class="boxline" />
<p class="top-box-text">MY SERVICES</p>
</div>

<div class="bottom-box">
<p class="box-header">CONTENT DEVELOPMENT</p>
<ul class="box-icons">
<li>SERVICE</li>
<li>SERVICE</li>
<li>SERVICE</li>
<li><a class="box-link" href="#">READ MORE</a></li>
</ul>
</div>
</div>

我的CSS：

.bottom-box, .top-box:hover>div {
    display: none;
}

.top-box:hover>.bottom-box {
    display: block;
}

.top-box {
    border: 5px solid #fff;
    box-shadow: 0 0 0 1px #000 inset;
    color:#000; 
    height:445px;
    box-sizing:border-box;
    background:#CEA453;
}

.bottom-box {
    border: 5px solid #fff;
    box-shadow: 0 0 0 1px #000 inset;
    margin:-5px -15px;
    background:#fff;
    height:445px;
    box-sizing:border-box;
}

.top-box-text {
    font-weight:600;
}

.boxline {
    display: block;
    border-top: 1px solid #000;
    margin: 1em 3em;
    padding: 0;
}

.round-background {
    background: #960;
    border-radius: 100%;
    border: 8px solid #fff;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.40);
    color: #fff;
    font-size: 60px !Important;
    padding: 32px;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    height: 140px;
    width:140px;
    margin:60px 0 20px;
    box-sizing:border-box;
}

.box-header {
    background:#960; 
    text-align:center;
    padding:1em 0;
    color:#fff;
    font-weight:600;
}

.box-icons, .box-icons li {
     padding: 0;
     margin: 0;
     list-style: none;
}

.box-icons li {
  margin: 1em;
  margin-left: 3em;
  line-height:1em;
  position: relative;
}

.box-icons li:before {
  content: '\f067'; /* fa-plus */
  font-family: 'FontAwesome';
  float: left;
  margin-left: -1.5em;
  color: #CEA453;
}

.box-link {
    color:#960;
    font-weight:600;
}

.box-link:active, .box-link:hover {
    color:#CEA453;
}

我创建的布局工作正常，但我想在翻转中添加一些过渡来软化悬停效果。

我是新手，所以任何人都可以给予任何帮助，我们非常感激。

我应该提一下，我将三个这样的盒子并排放置在顶盒div中添加grid-33类。我没有在这里粘贴所有代码，因为它相当大。

我使用以下CSS实现了悬停转换：

 .bottom-box, .top-box:hover>div {
        opacity: 0;
        height: 0;
        visibility: hidden;
        transition: opacity 0.5s ease;
}

.top-box:hover>.bottom-box {
    opacity: 1;
        height: auto;
        visibility: visible;
        transition: opacity 0.5s ease;
}

然而现在的问题是，在平板电脑或手机视图中，顶部框下的内容被推下（当没有悬停时）。一切都在全屏工作。

Answer 1

您无法在display属性上使用转换。你应该使用不透明度或其他类似的例子：

.bottom-box, .top-box:hover>div {
    position: absolute;
    top: 0;
    left:0;
    right: 0;
    transition: opacity 0.5s linear;
    opacity: 0;
}

.top-box:hover>.bottom-box {
    top: 0;
    left:0;
    right: 0;
    position: absolute;
    transition: opacity 0.5s linear;
    opacity: 1;
}

.top-box {
    border: 5px solid #fff;
    box-shadow: 0 0 0 1px #000 inset;
    color:#000; 
    height:445px;
    box-sizing:border-box;
    background:#CEA453;
}

.bottom-box {
    border: 5px solid #fff;
    box-shadow: 0 0 0 1px #000 inset;
    margin:-5px -15px;
    background:#fff;
    height:445px;
    box-sizing:border-box;
}

.top-box-text {
    font-weight:600;
}

.boxline {
    display: block;
    border-top: 1px solid #000;
    margin: 1em 3em;
    padding: 0;
}

.round-background {
    background: #960;
    border-radius: 100%;
    border: 8px solid #fff;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.40);
    color: #fff;
    font-size: 60px !Important;
    padding: 32px;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    height: 140px;
    width:140px;
    margin:60px 0 20px;
    box-sizing:border-box;
}

.box-header {
    background:#960; 
    text-align:center;
    padding:1em 0;
    color:#fff;
    font-weight:600;
}

.box-icons, .box-icons li {
     padding: 0;
     margin: 0;
     list-style: none;
}

.box-icons li {
  margin: 1em;
  margin-left: 3em;
  line-height:1em;
  position: relative;
}

.box-icons li:before {
  content: '\f067'; /* fa-plus */
  font-family: 'FontAwesome';
  float: left;
  margin-left: -1.5em;
  color: #CEA453;
}

.box-link {
    color:#960;
    font-weight:600;
}

.box-link:active, .box-link:hover {
    color:#CEA453;
}

<div class="top-box">
    <div style="text-align: center;">
    <i class="fa fa-laptop round-background"><!-- icon --></i>
    <hr class="boxline" />
    <p class="top-box-text">MY SERVICES</p>
</div>

<div class="bottom-box">
    <p class="box-header">CONTENT DEVELOPMENT</p>
    <ul class="box-icons">
      <li>SERVICE</li>
      <li>SERVICE</li>
      <li>SERVICE</li>
      <li><a class="box-link" href="#">READ MORE</a></li>
    </ul>
</div>

将过渡效果添加到Div翻转

1 个答案: