div 悬停，显示“阅读更多”链接溢出答案

【问题标题】：Div hover, reveal "read more" link overflowingdiv 悬停，显示“阅读更多”链接溢出
【发布时间】：2015-05-06 19:55:06
【问题描述】：

不确定为这个问题命名的最佳方式...查看有问题的代码笔：

我想要一个包含“阅读更多”链接的元素列表，当鼠标悬停在上面时，该链接会随着标题一起向上滑动。我希望所有元素都具有相同的高度，尽管它们都有不同的标题。

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");
});

本质上，我想要一个 div，它包含图像和下面的标题。当图像悬停时，标题会向上滑动，并且从图像下方的溢出中，“阅读更多”链接会向上滑动以代替标题所在的位置。我有某种实现了这个，但它似乎不正确。另外，如果我的标题很长，它会脱离悬停 div。有什么好方法可以让这个功能发挥作用？

【问题讨论】：

可以不用JS。这是一个开始。 codepen.io/anon/pen/bdVxgd

标签： javascript jquery html css

【解决方案1】：

尝试使用绝对定位元素。 Modified 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;
}

正如@isherwood 提到的，您可以omit JavaScript。

【讨论】：

【解决方案2】：

你的 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);
});

有用吗？英杰克

【讨论】：