Div悬停，显示“阅读更多”链接溢出

Wasn't sure the best way to title this question...view the codepen in question:

不确定标题这个问题的最佳方法...查看有问题的codepen:

I want to have a list of elements that have a "read more" link that slides up with the title when hovered over. I want all the elements to be the same height, though they will all have different titles.

我希望有一个元素列表,这些元素具有“阅读更多”链接,当悬停在其上时会与标题一起滑动。我希望所有元素都具有相同的高度,尽管它们都有不同的标题。

HTML:

<div class="a">
  <img src="http://toronto3d.ca/wp-content/uploads/2011/10/3d-archiitectural-rendering-interior-classic-kitchen.jpg">
  <div class="hover">
    <h3>The Complete Works of William Shakespeare Bla Bla Overflow</h3>
    <h4>Link here</h4>
  </div>
</div>

CSS:

.a {
  background-color: blue;
  padding: 10px;
  display: inline-block;
  transition: 1s;
  min-height: 250px;
}

h3 {
  width: 100%;
}

.hover {
  display: block;
  background-color: red;
  text-align: center;
  position: relative;
  height: 60px;
  overflow: hidden;
  transition: 1s;
  width: 290px;
}

.b {
  margin-top: -50px;
  height: 100px;
}

JS:

$(".a").hover(function(e){
  e.preventDefault();
  $(this).find(".hover").toggleClass("b");
});

Essentially, I would like to have a div, which holds and image and a title underneath. When the image is hovered, the title would slide up, and from the overflow below the image, a "read more" link would slide up in place of where the title is. I have sort of implemented this, but it doesn't seem right. Also, if I have a title that is long, it will run off the hover div. Whats a good way to make this functionality work?

从本质上讲,我想有一个div,其中包含图像和标题。当图像悬停时,标题将向上滑动,并且从图像下方的溢出开始,“阅读更多”链接将向上滑动以代替标题所在的位置。我有点实现了这个,但它似乎并不正确。此外,如果我有一个很长的标题,它将运行悬停div。什么是使这项功能有效的好方法?

2 个解决方案

#1

Try with absolute positioned elements. Modified codepen

尝试使用绝对定位元素。修改了codepen

.a {
  background-color: blue;
  border: 10px solid blue;
  display: inline-block;
  transition: 1s;
  min-height: 250px;
  overflow: hidden;
  position: relative;
}

h3, h4 {
  margin: 10px 0;
  font-size: 1.2em;
  line-height: 1.3;
}

.hover {
  display: block;
  background-color: red;
  text-align: center;
  position: absolute;
  transition: 1s;
  width: 100%;
  left: 0;
  bottom: -2.3em;
}

.b {
  bottom: 0;
}

As @isherwood mentioned, you can omit JavaScript.

正如@isherwood所提到的,你可以省略JavaScript。

#2

Have messed about with your codepen to suggest this

已经搞乱了你的codepen建议这个

var origPanelText = $.trim($('#title').html());  

$(".a").hover(function(e){
  e.preventDefault();
  $(this).find(".hover").toggleClass("b");
});

$('#title').mouseenter(function(){
  var addition = '<a href="#">Read more...</a>';
  var panelText = $.trim($('#title').html()).length;
  var theTitle=$.trim($(this).html());
  if (panelText > 30) {
    var cutString = theTitle.substring(0, 30);
    $(this).html(cutString+addition);
    }
});

$('#title').mouseleave(function(){
    $('#title').html(origPanelText);
});

Any use? EJK

有用吗? EJK

#1