如何在 CSS 中悬停时调用另一个类？答案

【问题标题】：How to call another class on hover in CSS?如何在 CSS 中悬停时调用另一个类？
【发布时间】：2016-10-18 09:06:47
【问题描述】：

DIV 的类是 FIRST。我想在悬停时调用 SECOND 类。我该怎么做？

我正在使用以下代码：

.first{
background:#F00;
}
.second{
background: #0F0;
}

&lt;div class="first"&gt; This is DIV&lt;/div&gt;

【问题讨论】：

上面的代码中没有second元素？
您不能在 CSS 中“调用类”...它不是一种编程语言。这是一个规则集。

标签： html css

【解决方案1】：

您不需要使用额外的类，只需使用伪选择器在悬停时添加额外的样式：hover

<style>
.first{
background:#F00;
}
.first:hover{
background: #0F0;
}
</style>

由于我很友善，我添加了一个示例，说明如何在纯 javascript 中执行您所要求的操作：

<style>
.first{
background:#F00;
}
.second{
background: #0F0;
}
</style>

<div class="first" onmouseover="change()" onmouseout="changeBack()"> This is DIV</div>
<script>
function change() {
    var d = document.getElementsByClassName("first");
    d[0].className += " second";
}
function changeBack() {
    var d = document.getElementsByClassName("first");
    d[0].className = "first";
}
</script>

【讨论】：

嗨..我想在悬停时调用另一个类
你只能使用javascript而不是css在悬停时调用另一个类
嗨 Hairmot.. 我该怎么做.. 请帮忙
所以你需要编写一些javascript来检测悬停。请参阅此 w3 学校页面：w3schools.com/jsref/event_onmouseover.asp
那么你需要添加类，同样使用javascript。查看答案：stackoverflow.com/a/507157/3759705

【解决方案2】：

您的上述方法不正确，无法满足您的要求。检查以下内容以了解如何操作。

Live demo

HTML 代码：

<div class="first"> This is DIV</div>

CSS 代码：

.first{
background:#F00;
}
.first:hover{
background: #0F0;
cursor: pointer;
}

说明

您需要声明:hover 才能创建悬停效果。因此，您无需创建新类，而是需要将 :hover 即伪类添加到您希望 hover 工作的类中。这将使您正在寻找悬停效果。

参考： W3 Hover reference

希望这会有所帮助。

【讨论】：

【解决方案3】：

当另一个元素在有限数量的情况下悬停时，您可以设置一个元素（具有特定类）的样式。主要约束：悬停的元素必须放在 HTML 代码中在样式化元素之前。

更多关于+和~adjacent and general sibling combinators

.first{
background:#F00;
}
.second{
background-color: #0F0;
}
.first:hover ~ .second {
  background-color: tomato;
}
.first:hover ~ .hello .second {
  background-color: violet;
}
.hello {
  background-color: beige;
}
.hello {
  padding: 1rem;
}

<div class="first"> This is DIV</div>
<div> Some div</div>
<div class="second"> I've class .second</div>
<div class="hello">
  <div class="second"> Child of a (following) sibling of .first</div>
</div>

【讨论】：

【解决方案4】：

悬停第一个框查看结果

这就是你在 javascript 中的做法。

document.getElementById('idOfElement') 正在获取元素引用。

在上面添加一个事件。在您的情况下，您需要两个事件，即 onmouseover 和 onmouseleave。

let first = document.getElementById('first'),
    sec = document.getElementById('second');

first.onmouseover = () => {
  sec.style.background = 'black';  
}

first.onmouseleave = () => {
  sec.style.background = 'red';  
}

#first, #second {
  height: 100px;
  width: 100px;
  background: red;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s linear;
}

<div id="first">first</div>
<div id="second">second</div>

您也可以在 css 上执行此操作。然而，这是有限的。您无法获得对父元素和先前兄弟元素的引用。这就是我所知道的。（如果我错了，请纠正我）。

#first, #second {
  height: 100px;
  width: 100px;
  background: red;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s linear;
}

#first:hover ~ #second {
  background: black;
}

<div id="first">first</div>
<div id="second">second</div>

希望对您有所帮助。干杯

【讨论】：