Zeigen/Verbergen von Div-Element auf Maus-hover table-row

Wollte ich zeigen einem div befindet sich auf jeder table row wenn die Maus über es. So, dass die div.tools von der schwebte table row angezeigt und ausgeblendet hover out.

Hier ist mein Tisch.

<table width="99%" cellspacing="0" cellpadding="2" class="main-box">
 <tbody><tr class="dataTableHeadingRow">
 <td class="dataTableHeadingContent">Categories /Products</td>
 <td class="dataTableHeadingContent" align="right">Action&nbsp;</td>
 </tr>

 <tr id="product_37">
   <td class="dataTableContent">
    <a href="#">Cotton Piqué Tennis Shirt</a>
    <div class="tools" style="display:none;">Tools Here</div>
   </td>
   <td class="dataTableContent" align="right">
    <img src="#/images/icon_arrow_right.gif" border="0" alt="">&nbsp;
   </td>
 </tr>

 <tr id="product_39">
   <td class="dataTableContent">
    <a href="#">Leather Plus Cotton Cut-Out Sling Back Sandal</a>
    <div class="tools" style="display:none;">Tools Here</div>
   </td>
   <td class="dataTableContent" align="right">
    <a href="#"><img src="#/images/icon_info.gif" border="0" alt="Info" title=" Info "></a>&nbsp;
   </td>
  </tr>

  <tr id="product_38">
    <td class="dataTableContent">
     <a href="#">Poly-Cotton 3/4 Sleeve Raglan Shirt</a>
    <div class="tools" style="display:none;">Tools Here</div>
    </td>
    <td class="dataTableContent" align="right">
     <a href="#">
     <img src="#/images/icon_info.gif" border="0" alt="Info" title=" Info "></a>&nbsp;
    </td>
  </tr>

  </tbody>
</table>

Habe ich versucht, diese jQuery-Funktion, sondern seine nicht funktioniert.

jQuery(function() {
 jQuery('*[id^=product_]').hover(function(){
   jQuery(this).children("div.tools").show();
    },function(){
   jQuery(this).children("div.tools").hide();
    });
 });
});
InformationsquelleAutor Ken | 2012-08-05
  1. 3

    Verwenden .find() statt .children().

    Den .Kinder() Methode, das Sie verwenden, findet nur die unmittelbaren Kinder, die bei Ihrem tr-Elemente werden die tds.

    Den .find() Methode sieht unter allen Nachkommen, so sieht es im inneren des tds zu finden, deine divs.

    Sie haben auch einen syntax-Fehler, beenden Ihr code überhaupt funktioniert: gibt es ein extra schließen }); am Ende entfernt werden sollten.

    Auch, anstatt die Auswahl auf alle Elemente mit * ist, kann es effizienter sein, wählen Sie nur die tr-Elemente in dieser Tabelle:

    jQuery(function() {
    jQuery('table.main-box tr[id^=product_]').hover(function() {
        jQuery(this).find("div.tools").show();
    }, function() {
        jQuery(this).find("div.tools").hide();
    });
});​
    • Versucht, aber funktioniert nicht auch. jsfiddle.net/rDThB
    • Das hat nicht funktioniert, weil Sie haben auch einen syntax-Fehler: Sie haben eine zusätzliche Schließung });. Sorry, habe ich nicht bemerkt, dass auf den ersten. Versuchen Sie dies: jsfiddle.net/nnnnnn/rDThB/1 (Hinweis in Ihrem fiddle, wenn Sie drücken Sie die "Aufräumen" - button, es behebt den Einzug und lässt den syntax-Fehler mehr offensichtlich, aber auch, wenn Sie überprüfen Sie Ihre browser die JS-Konsole Fehler angezeigt wird.)
    InformationsquelleAutor nnnnnn
Schreibe einen Kommentar