在 CSS 中添加 CSS Class OnHover

Question

当我将鼠标悬停在 HTML 元素上时，我希望该元素继承预先编写的 CSS class.

的属性

有没有办法在没有 Javascript 的情况下完成这个任务？

Answer 1

为项目写一个悬停 class，其作用与您描述的完全相同。

.box{
  height: 60px;
  width: 60px;
  border: 1px solid black;
  margin: 20px;
}

.box1:hover, .box2{
  background-color: red;
}

<div class="box box1"></div>
<div class="box box2"></div>

更简单：

.box{
  height: 60px;
  width: 60px;
  border: 1px solid black;
  margin: 20px;
}

.box:hover{
  background-color: red;
}

 <div class="box"></div>

Answer 2

<div mouseover="this.className='myClass'" onmouseout="this.className=''">
Hover Me
</div>

这将添加/删除带有 javascript 的 class 名称，否则在 CSS 中执行此操作：

div:hover {
background-color: red
}

Answer 3

在您的 CSS 文件中，为您定位的元素编写悬停选择器：

a {
text-decoration: none;
}

a:hover {
text-decoration: underline;
color: red;
}

创建 :hover 选择器将继承鼠标悬停在所选元素上时关联的属性。

<div>
    <a href="#">Example 1</a>
</div>

希望这能回答您的问题！

Add CSS Class OnHover in CSS