CSS过渡：悬停到显示div

由于我是初学者，所以我非常努力。CSS过渡：悬停到显示div

你能告诉我在悬停时如何过渡.box的position？

我只能显示它，但我不能transition的position从bottom到top这是我想做的事情。

.more { 
 
    position: relative; 
 
    height: 100px; 
 
} 
 

 
.box { 
 
    display: none; 
 
    position: absolute; 
 
    background: white; 
 
    border-radius: 4px; 
 
    height: 43px; 
 
    width: 169px; 
 
    top: 50px; 
 
    transition: top 5s; 
 
} 
 

 
.more:hover .box { 
 
    top: 100px; 
 
    display: block; 
 
}

<div class="col-sm-1 more"> 
 
    <a href="#" class="paragraphs " id="xx">More</a> 
 
    <div class="box"> 
 
    <span>Pages</span> 
 
    </div> 
 
</div>

来源

2017-08-08 Ahmed El Saeed

“top”是什么意思？ –

好吧，我给了位置相对如此使用属性顶部我认为应该做的改变位置，但我不知道 –

你可以添加更多的'HTML'，所以我可以看到更多的东西放置在页面上？ –

尝试visibility而不是display。可视性对于转换有点更好。

.more { 
 
    position: relative; 
 
    height: 100px; 
 
} 
 

 
.box { 
 
    position: absolute; 
 
    background: white; 
 
    border-radius: 4px; 
 
    height: 43px; 
 
    width: 169px; 
 
    top: 50px; 
 
    transition: top 5s ease; 
 
    visibility: hidden; 
 
} 
 

 
.more:hover .box { 
 
    top: 100px; 
 
    display: block; 
 
    opacity: 1; 
 
    visibility: visible; 
 
}

<div class="col-sm-1 more"> 
 
    <a href="#" class="paragraphs " id="xx">More</a> 
 
    <div class="box"> 
 
    <span>Pages</span> 
 
    </div> 
 
</div>

来源

2017-08-08 22:40:04 Ross

它的工作，非常感谢你 –

试试这个：如果你愿意，你可以很容易地改变幅度在框类，并在过渡:)

.box { 
    position:absolute; 
    top:0; 
    margin-top:400px; 
} 
.more:hover .box { 
    margin-top:0; 
    -moz-transition: all 0.5s ease-in-out; 
     transition: all 0.5s ease-in-out; 
}

来源

2017-08-08 22:46:21

转变工作方式之间进行插值速度旧的价值，然后是新的价值。你在这里看到的问题在技术上是旧的价值从未应用在首位。

设置.box到display: none基本上是说“不要渲染它”，并且转换不能在不存在的东西和另一个值之间转换。使用visibility而不是display修复了此问题，因为visibility: hidden仅隐藏该元素，而不是完全删除它。

.more { 
 
    position: relative; 
 
    height: 100px; 
 
} 
 

 
.box { 
 
    visibility: hidden; 
 
    position: absolute; 
 
    background: white; 
 
    border-radius: 4px; 
 
    height: 43px; 
 
    width: 169px; 
 
    top: 50px; 
 
    transition: top 5s; 
 
} 
 

 
.more:hover .box { 
 
    top: 100px; 
 
    visibility: visible; 
 
}

<div class="col-sm-1 more"> 
 
    <a href="#" class="paragraphs " id="xx">More</a> 
 
    <div class="box"> 
 
    <span>Pages</span> 
 
    </div> 
 
</div>

如果你想过渡到反向工作，那么你可以添加其他过渡延迟知名度。

来源

2017-08-08 22:47:09

你的解释是一个顶级thx –

CSS过渡：悬停到显示div

回答

相关问题