模拟特定的 CSS 悬停效果

Question

我正在尝试模拟您可以在此处看到的悬停效果： http://www.timeout.com/newyork（当您将鼠标悬停在文章上时。）

我知道如何让 div 继续 :hover，但我不明白他们是如何隐藏 "read more" 按钮直到 div 悬停在上方.

基本上我想知道如何隐藏 div 直到鼠标悬停，然后让它从另一个下方滑出。

Answer 1

他们可以更改最大高度 ...

.read_more {
   maxHeight: 2px;
   overflow:hidden;
}

.read_more:hover {
  maxHeight: 30px;
}

Answer 2

看看这个简单的例子是否有帮助：

.main{
  width: 300px;
  height: 300px;
  position: relative;
  background:yellow;
  overflow:hidden;
}

.hovered{
  width: 100%;
  height: 64px;
  background: gray;
  position: absolute;
  bottom: -28px;
}

.hovered span{
  background: red;
  color: #fff;
  display:block;
  width: 100%;
  padding: 5px 0;
}

.main:hover .hovered{
  bottom: 0;
}

https://jsfiddle.net/4zak8bfp/

Answer 3

这是一个纯粹的 CSS 解决方案，我很快就搞定了：CSS Hover Effect

h1, h2, h3, h4, h5{    
  margin:0px;
}

.tile{
  overflow: hidden;
  width: 400px;
  height:350px;
}

.tile:hover > .body{
  transition: all 0.5s ease;
  top: -3em;
}

.body{
  transition: all 0.5s ease;
  background-color: #333;
  margin:0px;
  color: #fafafa;
  padding: 1em;
  position:relative;
  top: -1em;
}

<div class="tile">
  <img src="http://lorempixel.com/400/300">
  <div class="body">
    <h2>Test Header</h2>
    <p>Info to display</p>
  </div>
</div>

基本上，当我将鼠标悬停在主 div 上时，我只是更改文本 div 的位置并为其添加过渡动画。

Answer 4

您可以使用一些 jQuery addClass() 和 removeClass() 方法来完成。

这是一个例子：

HTML:

<div class="wrapper">
<div class="caption">
<H1>This is a title</H1>
<p>
This is sample contents...
</p>
<div class="read-more-wrapper">
<a href="#">Read More</a>
</div>
</div>
</div>

CSS:

.wrapper{
  position: relative;
  width: 450px;
  height: 250px;
  background-color: #2f89ce;
  overflow: hidden;
}
.caption{
  display: block;
  position: absolute;
  bottom: -30px;
  width: 100%;
  height: auto;
  background-color: #fff;
  transition: all ease-in-out 0.3s;
}
.read-more-wrapper{
  background-color: #d03134;
  height: 30px;
}
.slidein{
  bottom: 0;
  transition: all ease-in-out 0.3s;
}

JQuery:

$('.wrapper').on('mouseenter', function(){
        $(this).find('.caption').addClass("slidein");
        }).on('mouseleave', function(){
            $(this).find('.caption').removeClass('slidein');
    });

这是 fiddle： https://jsfiddle.net/bk9x3ceo/2/

希望对您有所帮助。

模拟特定的 CSS 悬停效果

Emulating a specific CSS hover effect

css

hover

mousehover