CSS：类的悬停效果[重复]
Posted
技术标签:
【中文标题】CSS：类的悬停效果[重复]【英文标题】：CSS: Hover-effect for a class [duplicate] 【发布时间】：2021-11-06 16:46:38 【问题描述】：我想要一个带有悬停效果的 CSS 类。我用谷歌搜索并找到了这个：
table
border: 3px solid black;
td:hover background-color: yellow
但是，这给了我所有表的悬停效果。我只想对选定的表产生这种效果。有点像这样：
table
border: 3px solid black;
.hovereffect
td:hover background-color: yellow
但这不起作用。有人知道怎么做吗？
【问题讨论】：
您不能在纯 CSS 中嵌套这样的规则，这只能在 SASS/LESS 等预处理器语言中实现。.hovereffect td:hover 是你想要的选择器。
【参考方案1】：
你可以试试这个
.hovereffect td:hover
background-color: yellow
【讨论】：
【参考方案2】：<!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:hoverbackground-color: yellow;
.tabletwo td:hoverbackground-color: yellow;
.tablethree td:hoverbackground-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>【讨论】：
对此答案的解释会有所帮助，因为不鼓励仅使用代码的答案【参考方案3】：有一个非常简单的解决方法，叫做classes。
在您的HTML 文件中，您可以将类分配给<div>、<p>、<article> 等元素。
<div class="container"></div>
您可以像这样在CSS 文件中调用这些classes
.container
//Place Code here
对于悬停效果，你可以试试这个
.container td:hover
background-color: yellow;
classes 是一种为特定元素分配样式的非常有效的方法！
【讨论】：
以上是关于CSS：类的悬停效果[重复]的主要内容，如果未能解决你的问题，请参考以下文章