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

原创已于 2022-05-10 15:14:23 修改 · 6.1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html #前端

收录于

于 2016-08-18 17:35:12 首次发布

html+css 专栏收录该内容

113 篇文章

订阅专栏

效果如图

正常效果

鼠标悬停效果

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; }