col、colgroups 和 css“hover”伪类是否可以用于多个单元格?
突出显示表格行和鼠标悬停时的列,可以使用 CSS 伪类,如“:hover”。但是,如果您想要突出显示的不仅仅是单个单元格,而是整个行或列(包括标题)怎么办?
纯 CSS 解决方案可以使用 ::before 和 ::after 伪元素来实现此目的。这些元素分别在所选元素之前和之后添加内容。操作方法如下:
创建突出显示元素:
隐藏高亮溢出:
添加行/列选择器:
下面的 CSS 代码实现了这些原则:
table { overflow: hidden; } td, th, .row, .col { cursor: pointer; padding: 10px; position: relative; } td:hover::before, .row:hover::before { background-color: #FFA; content: '<pre class="brush:php;toolbar:false"><table> <tr> <th></th><th>50kg</th><th>55kg</th><th>60kg</th><th>65kg</th><th>70kg</th> </tr> <tr class="row"> <th class="row">160cm</th><td>20</td><td>21</td><td>23</td><td>25</td><td>27</td> </tr> <tr class="row"> <th class="row">165cm</th><td>18</td><td>20</td><td>22</td><td>24</td><td>26</td> </tr> </table>
HTML 基本上保持不变,但包括行和列的类名columns:
此解决方案适用于现代浏览器,将悬停突出显示效果扩展到整个行和列优雅地。
以上是我可以使用 `col`、`colgroup` 和 CSS `:hover` 来突出显示多个表格单元格吗?的详细内容。更多信息请关注PHP中文网其他相关文章!