如何突出表行悬停使用CSS只?

jljoyd4f  于 2023-05-30  发布在  其他
关注(0)|答案(6)|浏览(313)

是否可以仅使用CSS(不使用JavaScript)在悬停时突出显示表行(类似于this)?

rkue9o1l

rkue9o1l1#

是的,行是可能的,但列是不可能。

tr:hover {
  background-color: lightyellow;
}
km0tfn4u

km0tfn4u2#

是的,这是可能的,但你必须担心浏览器的兼容性这里是一个例子

<style type="text/css">
    .tbl {width: 640px;}
    .tbl tr {background-color: Blue; height: 24px}
    .tbl tr:hover {background-color: Red;}
</style>

<table class="tbl">
    <tr><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td></tr>
</table>
8aqjt8rx

8aqjt8rx3#

适用于大多数浏览器

table tr:hover td {
  background: #efefef;
  cursor: pointer;
}
rur96b6h

rur96b6h4#

如果你不关心Internet Explorer,:hover CSS伪类可以处理任何元素。
如果你真的关心IE,你可以找到一个解决方案here

fquxozlt

fquxozlt5#

<style type="text/css">
   tr.tr-hover-class:hover {
      background: grey !important;
   }
</style>

<table>
   <tr class='tr-hover-class'></tr>
</table>
wf82jlnq

wf82jlnq6#

在这种情况下,您可以使用样式表规则将其添加到表行,如下面的CSS代码示例所示:

tr:hover {
      background-color: #ffff99;
    }

完整示例:

.hoverTable{
        width:100%; 
        border-collapse:collapse; 
    }
    .hoverTable td{ 
        padding:7px; border:#4e95f4 1px solid;
    }
    /* Define the default color for all the table rows */
    .hoverTable tr{
        background: #b8d1f3;
    }
    /* Define the hover highlight color for the table row */
    .hoverTable tr:hover {
          background-color: #ffff99;
    }
<table class="hoverTable">
    <tr>
        <td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
    </tr>
    <tr>
        <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
    </tr>
    <tr>
        <td>Text 3A</td><td>Text 3B</td><td>Text 3C</td>
    </tr>
</table>

Source

相关问题