0

リストがある alltop.com のようないくつかのサイトで見た効果を実行しようとしています。タイトル (オーバーフローが非表示に設定されています) にカーソルを合わせると、タイトル全体が表示され、リスト全体が表示されません。ここに見られるように、動かない：

http://screencast.com/t/fK5n4X3Fg

（注：ツールチップタイプの効果でコンテンツを表示する別の効果もありますが、私はそれには興味がありません-すでにその問題を解決しています）。

これが私が試したことです...ここにテキストがあります：

  <div id="wprssmi_alltop_wrapper"><ul class="wprssmi_alltop_list"><li id="wrapper" ><h3    class="list_title"><a href="">BBC Sports Personality of the Year - live coverage</a></h3></li><li id="wrapper"><h3 ><a href="">Serious vulnerability reportedly leaves Samsung Galaxy S III and other devices wide open to malware</a></h3></li><li id="wrapper"><h3><a href="">Lanza’s body found with ammo for even more carnage</a></h3></li></ul></div>

ここにjQueryがあります

  jQuery('[id^=wrapper]').hover(function () {

    var cssObj = {
   'overflow': 'visible'
    }

   jQuery(this).css(cssObj);
  jQuery(this).next.hide();
 });

これは基本的にリスト項目にjQueryホバーを使用し、オーバーフローを表示に変更して次の項目を取得し、alltop.comで機能するように非表示にしようとします...残念ながらこれを機能させることはできません.

http://jsfiddle.net/amweiss/xFmsJ/9/

この効果を得る方法と、コードを修正する方法を知っている人はいますか?

ありがとう

4

2 に答える 2

2

alltop.com への影響は jQuery では行われません。これは純粋な CSS です。これが更新された jsfiddleです。

すべて、1 行のテキストの高<li>さposition:relativeにheight設定されています (この場合は 1.25em)。

すべて<h3>の中<li>に と がposition:absoluteありoverflow:hiddenます。

hover、<h3>get overflow:auto、height:autoおよびより大きなz-indexもので、次のリスト項目の上にレンダリングされます。また、他のアイテムを覆う白い背景も取得します。

于 2012-12-17T23:32:34.063 に答える
1

OK、私はビデオを見て、あなたが達成しようとしていることを知っています。あなたのアプローチが最善だとは思いませんが、コードを修正するのを手伝うことができます.

OK、まず最初に、マークアップです。同じ ID を共有する 3 つの li 要素があります。ID を持つ jQuery セレクターは、一致する最初の要素のみを返すため、すべての li 要素を返すわけではありません。後。

IDをクラスに変更するだけで簡単にできますjQuery('.wrapper')

2 つ目は、h3 で必要な場合に、li 要素に overflow: visible を適用しています。

jQuery('.wrapper').hover(function(){
  // here jQuery(this) is returning the li, you need to find the h3
  jQuery(this).find('h3').css(cssObj);
});

あなたのサンプル コードでは、次の関数の () を忘れていました。そのため、次の li 要素が隠されていません。

jQuery(this).next().hide();

最後にもう 1 つ、ホバー エフェクトを実行しているときに、ホバー イン用とホバー アウト用の 2 つの機能を設定できます。

jQuery('.wrapper').hover(function(){
  // This will execute on the hover in
  jQuery(this).find('h3').css('overflow', 'visible');
  jQuery(this).next().hide();
}, function(){
  // This will execute on the hover out
  // Restore everything to default
});

お役に立てれば

于 2012-12-17T23:34:44.297 に答える