Question

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

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

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。什么是使这项功能有效的好方法？

Answer 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。

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

有用吗？ EJK

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

2 个答案: