Question

在我们的网站上，我们目前通过从云提供商处获取数据并将其显示在表格中来显示描述文本。但是，有时我们希望描述更长，但它超出了可用区域，我们的CSS定义溢出到省略号。我想添加jQuery代码来扩展悬停时隐藏的文本，但不会弄乱表行高度或宽度。我试图在悬停时编辑高度的CSS解决方案在不增加行高的情况下无法工作。

如果隐藏文本可以通过保持在所有其他元素之上来弹出现有文本，那将会很棒。弹出窗口也应该在一定宽度后自动转到新行，因此弹出窗口甚至可能必须保持在下面的行的顶部。弹出窗口周围的边框或阴影会很好。

我是Javascript，jQuery和Web编码的新手，但我可以处理这些问题。我尝试了几个从网络上悬停的例子，但无法让它为我工作。

以下是随机填充数据的当前效果：

Answer 1

您可以使用此类机制：

<a class="zoom" href='#' style='font-size:12px;top:50px;left:50px'>Hover me!</a>

主

.zoom {
      -webkit-transition: all .2s ease-in-out;
              transition: all .2s ease-in-out;
    }
    .zoom:hover {
      -webkit-transform: scale(1.4);
              transform: scale(1.4);
    }

然后对于省略号，您可以使用小示例代码：

<ul>
<li><span class="icon"></span>Long Text with text-overflow:ellipsis</li>
<li><span class="icon"></span>Short text</li>
<li><span class="icon"></span>Long Text with text-overflow:ellipsis</li>
</ul>

和css

.icon {
height:18px;
width:18px;
background:url(http://www.darkroomart.com/dewolfe/css/images/dw-icons.png);
float:right;
cursor:pointer;
background-position:-72px -72px;
display: block;
}
.icon:hover {
background-position:-90px -72px;
}
li {
    text-overflow:ellipsis;
    height:20px;
    overflow:hidden;
    white-space:nowrap;
    list-style-type:none;
    width:150px;
}

Answer 2

使用jquery工具提示插件。您还可以通过将title属性设置为标题的完整内容来实现类似的效果试试jquery ui tooltip http://jqueryui.com/tooltip/

仅仅为工具提示提供jquery UI有点过分。所以你可以在Google上搜索其他人

jQuery在悬停时扩展文本

2 个答案: