Question

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

我理解如何让div继续前进：悬停，我不明白的是他们如何隐藏＆＃34;阅读更多＆＃34;按钮，直到div悬停在上面。

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

Answer 1

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

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
import javax.persistence.Table;
import org.hibernate.validator.constraints.Length;
import org.hibernate.validator.constraints.NotEmpty;

@Entity
@Table(name = "tweets")
public class Tweet {


    @Id
    @GeneratedValue
    @Column(columnDefinition = "INT unsigned")
    private Integer id;

    @NotEmpty
    @Length(max = 255)
    @Column(columnDefinition = "VARCHAR(255)", length = 255, nullable = false)
    private String profileImageUrl;

    @NotEmpty
    @Length(max = 64)
    @Column(columnDefinition = "VARCHAR(64)", length = 64, nullable = false)
    private String fromUser;

    @NotEmpty
    @Column(columnDefinition = "TEXT", nullable = false)
    private String text;

    @NotEmpty
    @Length(max = 255)
    @Column(columnDefinition = "VARCHAR(255)", length = 255, nullable = false)
    private String url;

    @NotEmpty
    @Column(columnDefinition = "FLOAT")
    private Float createDate;

    /*
     * Getter & Setter
     */

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getProfileImageUrl() {
        return profileImageUrl;
    }

    public void setProfileImageUrl(String profileImageUrl) {
        this.profileImageUrl = profileImageUrl;
    }

    public String getFromUser() {
        return fromUser;
    }

    public void setFromUser(String fromUser) {
        this.fromUser = fromUser;
    }

    public String getText() {
        return text;
    }

    public void setText(String text) {
        this.text = text;
    }

    public String getUrl() {
        return url;
    }

    public void setUrl(String url) {
        this.url = url;
    }

    public Float getCreateDate() {
        return createDate;
    }

    public void setCreateDate(Float createDate) {
        this.createDate = createDate;
    }   

}

var weekdays = [ "Sun", "Mon", "Tue", "Wed", "Thurs", "Fri", "Sat" ];

function getDateForLastOccurence( strDay )
{
   var date = new Date();
   var index = weekDays.indexOf(strDay);
   var difference =  date.getDay() - index; 
   if (difference < 0 ) 
   {
      difference = -7 - difference;
   }
   date.setDate( date.getDate() + difference );
   return  date;
}

getDateForLastOccurence( "Tue" );
getDateForLastOccurence( "Thurs" );

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

Answer 2

他们改变了maxHeight ......

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

.read_more:hover {
  maxHeight: 30px;
}

Answer 3

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

.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 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');
    });

这是小提琴： https://jsfiddle.net/bk9x3ceo/2/

希望有所帮助。

模拟特定的CSS悬停效果

4 个答案: