向Div转换添加转换效果

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

您无法在显示属性上使用转场。您应该使用不透明或其他类似的例子：

.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>