Question

我有一个图标，上面有一个方框，上面写着Hello。当您将鼠标悬停在图标或框上时，我希望它能够展开并显示隐藏的文字（World on Hot Fiya！），非常类似于阅读更多/阅读更少的功能。我遇到的问题是，当盒子显示它覆盖图标时，因为它显示下来。我想知道我能做什么，所以图标保持不变，方框显示文字正在上升。

这是我正在使用的代码：

<div class="icon"><img src="icon.jpg"></div>
<div class="box">
  Hello
  <p>World on Hot Fiya</p>
</div>

$('.box p').addClass('is-hidden');

$('.box').hover(function() {
  $('.box p').removeClass('is-hidden').addClass('block');
}, function() {
  $('.box p').removeClass('block').addClass('is-hidden');
});

Answer 1

* 修改为包含评论请求 *

这是我刚刚编写的一个插件，用于动态设置高度（基于其初始/自动高度） -

http://jsfiddle.net/jmsessink/CTvMe/8/

在DOM上调用函数，就像这样 -

$(function () {
    $('.box').tooltipSlider({tooltip:'.tool-tip', titleHeight:'20px'});
});

如上所示，此函数中的对象的params，tooltipSlider，是 -

.tooltipSlider(
    {
        tooltip: '(class that you want to be the tooltip)',
        titleHeight: '(initial height of tooltip above icon (non-hovered))px'
    }
);

希望能为您提供。

展开工具提示以显示更多内容

1 个答案: