向Div转换添加转换效果
问题描述:
我已经设置了以下html和css来创建一个在悬停时更改内容的div。我想一个简单的过渡添加到悬停如下:向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;
}
但是现在的问题是在机顶盒的平板电脑或手机查看被按下时(不徘徊)的内容。一切正常,全屏显示。
答
您无法在显示属性上使用转场。您应该使用不透明或其他类似的例子:
.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>
+0
感谢您的输入。我在翻转代码中包括高度等,因为这是我的主题的帮助台提供给我的。我刚刚尝试没有高度设置,一切正常。 – khunmax
我有点糊涂..你要转换的不透明度。那么,为什么你要改变身高和知名度呢?不透明度:0到不透明度:1会做的伎俩。你不需要所有其他的东西。 – zsawaf