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