將鼠標懸停在元素上時如何更改類？

Question

首先，我對 JS 或任何其他編程語言真的很陌生，這是我在 Stackoverflow 上的第一篇文章； 話雖如此，我提前為任何我的錯誤道歉，讓我們來看看這個問題。

我有這個代碼，我只需要一次懸停就可以更改li和i元素的類。

我想要的是當我將鼠標懸停在它們上面時讓它們都改變它們的顏色（關於顏色的事情只是一個例子，事實上我將不得不進行更多的更改），例如，如果我將鼠標懸停在li ， i的顏色也發生了變化，反之亦然。

我在我的 codepen 中提供了兩個示例，在第一個中我選擇了li和i元素，在第二個中我選擇了a元素，它們都有各自的類。

在第一個中，當我將鼠標懸停在li它的顏色會發生變化，但i不會發生任何變化，如果我將鼠標懸停在i它會發生變化，但li保持不變。

簡而言之，我需要與 codepen 完全相同的效果，但我需要它同時發生在文本 ( li ) 和箭頭 ( i ) 上。

關於第二個例子，它不能很好地工作。

ps 重要的是，一旦一個項目收到了active的類，只有當另一個項目收到懸停並變為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

我在理解您想要什么時遇到了一些麻煩，因此對您的 Q 的兩種不同解釋有兩個答案：

單獨應用於每個元素

基於Mobly 的站點 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 中，這是通過兄弟選擇器完成的：

.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 類移除所有元素的活動類：

示例 Jquery ：

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

其他建議

而不是<ul> ，使用語義更正確的<nav> ，下面只有<a>標簽。
使用類而不是 id； 通常默認為 class ，除非您需要 id 屬性。

OP 注意：讓我知道哪些部分實際上有助於具體回答您的問題，我將刪除或刪除其余部分。

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

檢查此鏈接，您可以在那里了解如何使用.removeClass() .addClass()和.toggleClass() jQuery 方法。 我強烈建議您使用 jQuery 而不是純 JavaScript。

但是順便說一句，如果要更改顏色使用 CSS 比使用 JS 更有效，則使用如下：

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

所有具有類.class的元素都將是紅色的，但是當您在元素中輸入鼠標時，它將是藍色的 ;)

將鼠標懸停在元素上時如何更改類？

問題描述

3 個解決方案

解決方案1
1 已采納 2019-07-05 15:43:47

單獨應用於每個元素

使用兄弟姐妹

類的持久性

其他建議

解決方案2
0 2019-07-05 15:23:06

解決方案3
0 2019-07-05 21:14:45

將鼠標懸停在元素上時如何更改類？

問題描述

3 個解決方案

解決方案1 1 已采納 2019-07-05 15:43:47

單獨應用於每個元素

使用兄弟姐妹

類的持久性

其他建議

解決方案2 0 2019-07-05 15:23:06

解決方案3 0 2019-07-05 21:14:45

解決方案1
1 已采納 2019-07-05 15:43:47

解決方案2
0 2019-07-05 15:23:06

解決方案3
0 2019-07-05 21:14:45