javascript - 当我将鼠标悬停在元素上时如何更改类？

Question

首先，我是 JS 或任何其他编程语言的新手，这是我在 Stackoverflow 上的第一篇文章；话虽如此，我提前为任何我的赌注道歉，让我们开始这个问题吧。

我有这段代码，我只需要一次悬停就可以更改 li 和 i 元素的类。

我想要的是当我将鼠标悬停在它们上面时让它们都改变颜色(关于颜色的事情只是一个例子，事实上我将不得不做更多的改变)，例如，如果我将鼠标悬停在 li 上，i 的颜色也会发生变化，反之亦然。

我在我的 codepen 中提供了两个例子，第一个我选择了 li 和 i 元素，第二个我选择了 a 元素，它们都有各自的类。

在第一个中，当我将鼠标悬停在 li 上时，它的颜色会发生变化，但 i 不会发生任何变化，如果我将鼠标悬停在 i 它改变了，但是 li 保持不变。

简而言之，我需要与 codepen 完全相同的效果，但我需要在文本 (li) 和箭头 (i) 处发生这种情况同时。

关于第二个例子，效果不是很好。

附注重要的是，一旦一个元素收到类 active，它只会在另一个元素收到悬停并变为 active 时返回到其原始类，如果光标移动到屏幕的任何其他部分，然后该元素应包含该类，以便始终有一个具有该类 active 的元素。

https://codepen.io/WegisSilveira/pen/qzMqxj

    <ul>
    <a href="">
      <li class="test">Banheiro</li>
      <i class=" test ">&#62;</i>
    </a>
    <a href="">
      <li class="test active">Cozinha</li>
      <i class=" test">&#62;</i>
    </a>
    <a href="">
      <li class="test">Quarto</li>
      <i class="test">&#62;</i>
    </a>
    <a href="">
      <li class="test">Varanda</li>
      <i class=" test ">&#62;</i>
    </a>
</ul>

<h1>-------------------------</h1>

<ul>
    <a class="classA active" href="">
      <li >Banheiro</li>
      <i >&#62;</i>
    </a>
    <a class="classA" href="">
      <li >Cozinha</li>
      <i >&#62;</i>
    </a>
    <a class="classA" href="">
      <li >Quarto</li>
      <i >&#62;</i>
    </a>
    <a class="classA" href="">
      <li >Varanda</li>
      <i >&#62;</i>
    </a>
</ul>

Answer 1

我在理解你想要的东西时遇到了一些麻烦，所以对于你的问题的两种不同解释的两个答案:

单独应用于每个元素

基于 Mobly's site navbar ，您可能希望通过 CSS 和/或 JS/Jquery 为每个元素应用规则(请注意，这是两种不同的方法，您可以使用其中之一/或，尽管通常首选 CSS 方法):

CSS(或者你可以只改变颜色而不是不透明度):

.test {
    color: black;
    opacity: 0.7;
    /* transition: opacity 0.5s; optional fun effect*/
}
.test:hover {
    /* this would essentially be your active class */
    opacity: 1.0;
}

JS 方法(w/Jquery；你可以不用 Jquery，只是要选择更多的单词):

$(".test").hover(function() {
    $(this).children().addClass("active");
}, function() {
  $(this).children().removeClass("active");
});

使用 sibling

CSS，代表级联样式表，不能向后工作，但可以“横向”工作于 sibling 。在 CSS 中，这是通过 sibling selectors 完成的。 :

.test:hover, .test:hover ~ i {
    color: red;
}

JS

$(".test").hover(function() {
    $(this).addClass("active");
    $(this).siblings().addClass("active");
}, function() {
    $(this).removeClass("active");
    $(this).siblings().removeClass("active");
});

类的持久化

It is important that once an item has received the class 'active', it only backs to its original class when another item receives the hover and becomes 'active'

要添加一个仅在另一个元素激活时才更改的持久类，请删除 hoveroff 的事件处理程序，而是删除具有 .active 类的所有元素的事件类:

Example Jquery :

$(".test").hover(function() {
    $(".active").removeClass("active");
    $(this).addClass("active");
    $(this).siblings().addClass("active");
});

---

其他推荐

• 而不是 <ul> , 使用语义上更正确的 <nav>只有 <a>下面的标签。
• 使用类代替id；通常默认为类，除非您需要 id 属性。

操作说明:让我知道哪些部分实际上有助于具体回答您的问题，我将删除或删除其余部分。