Question

[这是我之前发布的另一个问题]

我在一个锚中有一个p标签，在循环中有许多可变的实例。我的目标是在悬停时使p标签展开并显示更多信息。到目前为止我在鼠标移植方面都有这个。

$('.boxOPToneplustwo').mouseover(function (e) {
console.log("in");
$('p', this).addClass('popupHighlight')
});

我需要编辑此代码以允许p标记相对于元素中的文本量增加其高度。如果它需要三行，它将扩大该数量，反之亦然。

.popupHighlight {
height: 3.6em !important;
}

正如你所看到的，它在这一点上被硬编码到一定的高度，是否有一个可以解决这个问题？

Answer 1

你可以通过在css

中设置一些值来做到这一点

.popupHighlight {
     min-height:100px;

         overflow:hidden;
}

它会根据内容的大小进行扩展

Answer 2

嘿，这件事很容易做到。这是一个小提琴

http://jsfiddle.net/robbiebardijn/vAyn9/

.boxOPToneplustwo{
    background-color: red;
    height: 1em;
    line-height: 1em;
    position: relative;
    overflow: hidden;
    transition: height 1s ease
}

.boxOPToneplustwo.popupHighlight{
    height: 3em;
}

Jquery mouseover动态p标签扩展

2 个答案: