1

labelクラスを使用してdivクラスにアクセスする必要があります。ロジックはマウスを上に置くこと<label class="name"> <div class="hidden">で呼び出されます。注意<li>してください、そして、<div>idは常にunqiueです

HTML

     <li id="132" class="main" ><label class="name">Ajay</label>   
    <div class="hidden" id="132" >
       <p>Some Msg!!<p>
    </div>
    </li>

    <li id="192"  class="main"> <label class="name">Raj</label>    
    <div class="hidden" id="192" >
       <p>Some Msg!!<p>
    </div>
    </li>

    <li id="231"  class="main" ><label class="name">David</label>    
    <div class="hidden" id="231" >
       <p>Some Msg!!<p>
    </div>
    </li>

   So on...

Jquery

    $('.name').hovercard({detailsHTML:$('.hidden').html()}) 
// on placing mouse on label <div class="hidden"> is called

私を助けてください

4

2 に答える 2

4

マークアップが無効であり、説明がコードで実行しようとしている内容と一致していません。ここでは、それぞれの場合のマークアップは次のようになっていると思います。

<li id="132" class="main"><label class="name">Ajay</label>
<div class="hidden" id="132" >
   <p>Some Msg!!<p>
</div>
</li>

もしそうなら、そしてあなたが要素を呼び出しhovercardてそれらの近くからの情報を含めようとしているなら、あなたはこのようなものが欲しいでしょう：label.namediv.hidden

 $(".name").each(function() {
    var $this = $(this);
    $this.hovercard({detailsHTML:$this.nextAll("div.hidden").html()});
 });

...divとlabelは親子関係にないため、兄弟です。ナビゲートする必要があるため、ループなしでこれを行うことはできません。

また、とのid両方で同じ値を使用することは無効であることに注意してください。値はページ上で一意である必要があります。また、数字で始まる値はHTML5では有効ですが、HTML4以前では無効であり、CSSでは無効であることに注意してください。jQueryを使用しているので、構造を操作するために多くのCSSセレクターを使用している可能性があります。すべての数値はCSSでは無効であるため、CSSセレクターでは無効であり、問​​題が発生するだけです。labeldivididid

于 2012-05-24T09:52:05.010 に答える
3

TJが言ったように、あなたのマークアップは無効です。正しいマークアップを使用すると、HTMLとCSSのみでこれを実現できます。

このようなもの：

HTML

<li id="231"  class="main">
   <label class="name">David</label>
   <div class="hidden" id="231" >
      <p>Some Msg!!<p>
   </div>
</li>

CSS

div.hidden {
   display: none;
}
li.main:hover div.hidden {
   display: block;
}

例： http： //jsfiddle.net/MWbS4/

于 2012-05-24T09:54:12.850 に答える