0

その上に「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');
});
4

1 に答える 1

2

*コメントからのリクエストを含むように修正*

これは、高さを動的に設定するために作成したばかりのプラグインです（初期/自動高さに基づいて）-

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

次のように、DOM準備完了で関数を呼び出します-

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

上記のように、この関数 tooltipSlider のオブジェクトのパラメータは -

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

それがあなたのためにそれをカバーすることを願っています.

于 2012-12-06T21:44:08.610 に答える