Question

首先，我真的对JS或任何其他编程语言都是陌生的，这是我关于Stackoverflow的第一篇文章；话虽如此，我对任何错误都深表歉意，让我们开始讨论这个问题。

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

我想要的是当我将鼠标悬停在它们上面时改变它们的颜色（关于颜色的事只是一个例子，事实上，我将不得不进行更多更改），例如，如果我将鼠标悬停在“ li”上方，“ i”的颜色也会更改，反之亦然。

我在codepen中提供了两个示例，在第一个示例中，我选择了“ li”和“ i”元素，在第二个示例中，我选择了“ a”元素，所有这些都有各自的类别。

在第一个中，当我将鼠标悬停在“ li”上时，其颜色会发生变化，但“ i”不会发生任何变化；如果将鼠标悬停在“ i”上，则会发生更改，但“ li”会保持不变

简而言之，我需要与Codepen完全相同的效果，但是我需要同时使用文本（li）和箭头（i）来实现。

关于第二个示例，它不能很好地工作。

p.s。重要的是，一旦某个项目接收到“活动”类，则只有当另一个项目接收到悬停并变为“活动”时，它才返回其原始类，如果将光标移至屏幕的任何其他部分，则该项目应举行课程，以便始终有一个类别为“活动”的项目。

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

我在理解您想要的内容时遇到了一些麻烦，因此对于您对Q的两种不同解释有两个答案：

分别应用于每个元素

基于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方法（带有Jquery；您可以在没有Jquery的情况下执行此操作，只需选择更多单词即可）：

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

使用兄弟姐妹

CSS代表级联样式表，不能向后工作，但可以“向侧面”工作。在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");
});

课程的持久性

重要的是，一旦某项商品获得“有效”类别，仅当另一个项目收到悬停时才返回其原始类并变为“活跃”

要添加仅在另一个元素变为活动状态时才发生变化的持久类，请删除hoveroff的事件处理程序，而改为使用.active类删除所有元素的活动类：

Example Jquery：

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

其他建议

代替<ul>，而是使用语义更正确的<nav>，其下仅包含<a>标签。
使用类代替id；通常，除非需要id属性，否则默认为class。

注意事项：让我知道哪些部分实际上可以具体回答您的问题，其余部分我将删除或删除。

Answer 2

<html>
  <span id="my-id" class="one">Element</span>

  <!-- Include jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script>
    $(function() {
      // attach event handler so that when you hover over it you change the class
      $('#my-id').hover(function() {
        // first remove class "one"
        $(this).removeClass('one');

        // next add class "two"
        $(this).addClass('two');

        // OR if you want to add and remove the same class you can use toggle
        $(this).toggleClass('one'); // this will add "one" class if it is not there or remove it if it is there
      });
    });

  </script>
</html>

您的代码无法正常运行的原因是，所有元素都共享相同的ID。将“钻石” ID放入class属性，然后从您的元素中删除ID属性。 ID是唯一的。

<ul>
  <a href="" >
    <li class="test active"</li>
    <i class="flaticon-right-arrow test activeI"></i>
    <i class="diamond flaticon-diamond"></i>
  </a>
  <a href="">
    <li class="test">Banheiro</li>
    <i class="flaticon-right-arrow testI "></i>
    <i class="diamond flaticon-diamond"></i>
  </a>
  <a href="">
    <li class="test">Cozinha</li>
    <i class="flaticon-right-arrow testI "></i>
    <i class="diamond flaticon-diamond"></i>
  </a>
</ul>

Answer 3

选中此link，您可以在那里学习如何使用.removeClass() .addClass()和.toggleClass() jQuery方法。我强烈建议您使用jQuery而不是普通的JavaScript。

但是，如果要更改颜色，使用CSS比使用JS更有效，请按以下方式使用它：

.class{
   color: red;
}
.class:hover {
   color:blue;
}

所有具有类.class的元素将为红色，但是当您在元素中输入鼠标时，它将为蓝色;）

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

3 个答案:

分别应用于每个元素

使用兄弟姐妹

课程的持久性

其他建议