Question

我有h2标签并且宽度只有100px但是h2标签内的文本内容超过100px，我想显示文本内容只出现在一行中。我想在brazzers.com上制作它，当用户将鼠标悬停在帖子的标题上时，帖子的长标题将滑动以显示所有内容。有没有办法使用jquery创建它？抱歉我的新手问题

Answer 1

似乎这是你可以用CSS和悬停行为做的事情

#test {
    width:30px;
    overflow:hidden;
    white-space:nowrap;
}
#test:hover
{
    overflow:visible;
}

http://jsfiddle.net/tYEfs

此外，参考链接上可能有nsfw警告吗？

Answer 2

我会创建一个带溢出的div：隐藏，这个div内部将是h2标记，其postion设置为relative或absolute（取决于你的结构和预期行为）。只要鼠标悬停在div上，我就会使用http://api.jquery.com/animate/将css“left”属性设置为负值。

P.S：没有检查这个例子，因为正在上班......

Answer 3

请尝试这个例子：

http://jsfiddle.net/QKstB/2/

这是一个脚本：

var textWidth = $('h1 nobr').outerWidth(),
    totalWidth = $('h1').outerWidth(),
    diff = totalWidth - textWidth;

$('h1').hover( function() {
    $('h1 nobr').animate({ 'margin-left': diff }, 5000, function() { 
        $(this).css('margin-left', 0)
    });
}, function() { 
    $('h1 nobr').stop(true, true);
});

使用Jquery悬停鼠标时创建标题滑动

3 个答案: