鼠标悬停在表格任意一个<td>上改变整行背景颜色并在第一个td显示象征性的某图片

效果如图

正常效果

鼠标悬停效果

html代码

<div class="list-div" id="listDiv">
   <table cellspacing='1' cellpadding='3'>
     <tr>
      <th>日志ID</th>
      <th>操作者</th>
      <th>操作日期</th>
      <th>ip地址</th>
      <th>操作记录</th>
     </tr>
     {foreach from=$log_list item=log}
     <tr >
      <td class="first-cell">{$log.log_id}</td>
      <td>{$log.user_name}</td>
      <td>{$log.log_time}</td>
      <td>{$log.ip_address}</td>
      <td>{$log.log_info}</td>
     </tr>
     {/foreach}
   </table>
   <div class="pages">{$multi}</div>
</div>
css代码
整行变色
.list-div tr:hover td{ background-color: #f6f8fb; } 前方图片  .list-div tr:hover td.first-cell{ background:#f6f9fb url(../images/common/list_table_hover_icon.png) repeat-y left top; }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值