CSS：class 的悬停效果

Question

我想要一个带有悬停效果的 css class。我用谷歌搜索并找到了这个：

table{
    border: 3px solid black;
  }
td:hover {background-color: yellow}

但是，这为我提供了所有表的悬停效果。我只想对选定的表产生这种效果。有点像这样：

table{
    border: 3px solid black;
  }

.hovereffect {
    td:hover {background-color: yellow}
}

但这行不通。有人知道怎么做吗？

Answer 1

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <style>
      table{
    border: 3px solid black;
  }
  .tableone td:hover{background-color: yellow;}
  .tabletwo td:hover{background-color: yellow;}
  .tablethree td:hover{background-color: yellow;}  
    </style>
  </head>
  <body>
        <table class="tableone">
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            <tr>
        </table>
        <table class="tabletwo">
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            <tr>
        </table>
        <table class="tablethree">
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            <tr>
        </table>
  </body>
</html>

Answer 2

你可以试试这个

.hovereffect td:hover {
    background-color: yellow
}

Answer 3

有一个非常简单的解决方法，叫做 classes。

在您的 HTML 文件中，您可以将类分配给 <div>、<p>、<article> 等元素

<div class="container"></div>

您可以在 CSS 文件中这样调用这些 classes

.container{
  //Place Code here     
}

你可以试试这个悬停效果

.container td:hover{
    background-color: yellow;
}

classes 是一种将样式分配给特定元素的非常有效的方法！

CSS：class 的悬停效果

CSS: Hover-effect for a class

css

html-table

hover