問題與jQuery選擇

我有這個表：問題與jQuery選擇

<table> 
    <tr class="row"> 
     <td>Title 
      <div class="action">hello</div> 
     </td>  
     <td>Rorow</td> 
    </tr> 
    <tr class="row"> 
     <td>Title 
      <div class="action">hello</div> 
     </td> 
     <td>Rorow</td> 
    </tr> 
</table>

，我想使孩子消失時，我將鼠標懸停在該行。所以我做了這個，但它選擇了所有其他的行爲以及：

$(".row").hover(
     function() { 
      $(".action").css("visibility","hidden"); 
     }, 
     function() { 
      $(".action").css("visibility","visible"); 
     } 
    );

我錯過了什麼嗎？

來源

2011-08-20 Ron

你也可以在純CSS中做到這一點。

tr.row .action { 
    display:block; 
} 

tr.row:hover .action { 
    display:none; 
}

來源

2011-08-20 02:12:58 Dennis

感謝您的回答。我用jsfiddle驗證了這一點，並且效果很好。 – Ron

這將與IE6的工作？ – Ron

我不確定，但我傾向於沒有。 IE6與懸停選擇器有問題。幸運的是，我沒有機會使用IE6來測試它，但在這種情況下這是不幸的。您可能想要使用JS解決方案來確保。 – Dennis

現在，當您將鼠標懸停在行上時，您正在告訴每個有「操作」類的元素消失。相反，您可以使用this來引用遊標傳遞的行，然後查找其子「action」元素並將其隱藏。

$(".row").hover(
    function() { 
     $(this).find(".action").hide(); 
    }, 
    function() { 
     $(this).find(".action").show(); 
    } 
);

來源

2011-08-20 02:03:03

感謝您的支持。我在瀏覽孩子選擇器，無法讓他們工作。 :) – Ron

很高興我能幫忙！ –

只需認準.row父元素中的類使用$(this)：

$(".row").hover(
    function() { 
     //$(this) refers to the row that received the hover event 
     $(this).find(".action").hide(); 
    }, 
    function() { 
     $(this).find(".action").show(); 
    } 
);

這裏的a working jsFiddle。

來源

2011-08-20 02:03:12

謝謝！適用於我。 :) – Ron

問題與jQuery選擇

回答

相關問題