Question

我正在尝试在表的行中执行鼠标悬停操作，但它仅适用于第一行。我不是这里的问题。以下是我的代码。 CSS位于文件中：

.hover{
background-color: #d3d3d3;
}



<script type="text/javascript">

$(document).ready(function(){
    $('#tableResults tr').hover(function() {
        $(this).addClass('hover');
    }, function() {
        $(this).removeClass('hover');
    });
});

</script>


<table  id="tableResults" class="table_border_all_around">
<tr>
<th class="header_table" style="width:auto;">PreOrder transaction ID</th>
<th class="header_table"  style="width:auto;">Partner Order ID</th>
<th class="header_table"  style="width:auto;">Order Handler</th>
<th class="header_table"  style="width:auto;">Qwest Order ID</th>
<th class="header_table"  style="width:auto;">TN</th>
<th class="header_table"  style="width:auto;">Order Status</th>
<th class="header_table"  style="width:auto;">Order Status Code</th>
<th class="header_table"  style="width:auto;">Order Status Message</th>
<th class="header_table"  style="width:auto;">Order Status Date</th>
<th class="header_table"  style="width:auto;">Order  status Time</th>
</tr>
<?php
if(!is_null($this->Orders)){?>
<?php 
foreach ($this->Orders as $order){

?>
<tr>
<td ><?php echo $this->escape($order->PreOrderTransactionId)?></td>
<td  ><?php echo $this->escape($order->PartnerOrderId)?></td>
<td ><?php echo $this->escape($order->OrderHandler)?></td>
<td ><?php echo $this->escape($order->QwestOrderId)?></td>
<td  ><?php echo $this->escape($order->TN)?></td>
<td ><?php echo$this->escape($order->OrderStatus)?></td>
<td ><?php echo $this->escape($order->OrderStatusCode)?></td>
<td ><?php echo $this->escape($order->OrderStatusMessage)?></td>
<td ><?php echo $this->escape($order->OrderStatusDate)?></td>
<td ><?php echo $this->escape($order->OrderStatusTime)?></td>
</tr>
<?php }
}?>
</table>

非常感谢任何帮助。谢谢。

Answer 1

您最好使用css：s :hover选择器。这就像jQuery的.hover或.onmouse*函数。这更容易，并且不需要jQuery或javascript。下面我使用纯css的例子：

#tableResults tr:hover{
    background-color: #d3d3d3;
}

请记住删除您的jquery代码。：）

JSFiddle：http://jsfiddle.net/73J6k/

Answer 2

$('#tableResults tr').mouseover(function() {
        $(this).addClass('hover');
}).mouseout(function(){
        $(this).removeClass('hover');
});

DEMO： http://jsfiddle.net/A5bsS/

为什么鼠标悬停只适用于第一行

2 个答案: