Question

DIV类是第一类。我想在悬停时调用类SECOND。我怎么能这样做？

我正在使用以下代码：

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

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

Answer 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>

Answer 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

希望这有帮助。

Answer 3

将鼠标悬停在第一个框以查看结果

这是你在javascript中的方式。

document.getElementById（＆＃39; idOfElement＆＃39;）正在获取元素参考。

在其上添加活动。在您的情况下，您需要两个onmouseover和onmouseleave事件。

＆＃13;

let first = document.getElementById('first'),
    sec = document.getElementById('second');

first.onmouseover = () => {
  sec.style.background = 'black';  
}

first.onmouseleave = () => {
  sec.style.background = 'red';  
}

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

希望它有所帮助。干杯

Answer 4

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

。

有关+和~ adjacent and general sibling combinators

的更多信息

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

4 个答案: