单击div时，如何更改多个文本的悬停颜色？

Question

这是我在http://impdigitaldev.site/home-v2-services-test/上出现问题的页面

只需向下滚动到“服务”部分，查看我所指的菜单。

所以..。

我有一种“菜单”在服务部分的页面，有4个不同的选择。单击其中一个菜单项时，背景将更改为橙色。

但是，当菜单中的项目未被选中时，文本应该有一个悬停，以更改文本橙色。它目前也有这种情况。

我遇到的挑战是，当您选择菜单项时，背景会更改为橙色。由于文本仍然被设置为橙色，这就产生了一些问题。

我希望发生的是，当您选择一个菜单项时，它会移除对该特定文本元素的悬停效果(或至少将其设置为白色)，同时在页面上的其他3个菜单项上保持悬停效果。

然后，当您单击其他菜单项时，它会对这些div中的文本执行相同的操作，并将前一菜单项上的悬停“重置”回文本上的橙色悬停。

当您单击div时，我已经成功地消除了悬停效果，但当您单击另一个div时，我还没有计算出将悬停效果重置回常规橙色悬停效果。

我删除了我正在试验的代码片段，该代码将活动菜单项上的悬停颜色更改为白色，但在选择其他菜单项后，它不会切换回橙色。

菜单中的每个按钮(div)分别有..blurb 1、2、3、4类。

(请轻点，我刚刚开始尝试java/jquery，就像2周前的哈哈，所以这段代码可能是垃圾)

任何帮助都是感激的，谢谢！

<script type="text/javascript">

(function($) {
  $(document).ready(function() {

    $(".blurb-1").click(function() {
      $('.blurb-1:hover').css('color', '#ffffff');
      $('.blurb-2:hover').css('color', '#ff6900');
      $('.blurb-3:hover').css('color', '#ff6900');
      $('.blurb-4:hover').css('color', '#ff6900');
    });

    $(".blurb-2").click(function() {
      $('.blurb-1:hover').css('color', '#ff6900');
      $('.blurb-2:hover').css('color', '#ffffff');
      $('.blurb-3:hover').css('color', '#ff6900');
      $('.blurb-4:hover').css('color', '#ff6900');
    });

    $(".blurb-3").click(function() {
      $('.blurb-1:hover').css('color', '#ff6900');
      $('.blurb-2:hover').css('color', '#ff6900');
      $('.blurb-3:hover').css('color', '#ffffff');
      $('.blurb-4:hover').css('color', '#ff6900');
    });

    $(".blurb-4").click(function() {
      $('.blurb-1:hover').css('color', '#ff6900');
      $('.blurb-2:hover').css('color', '#ff6900');
      $('.blurb-3:hover').css('color', '#ff6900');
      $('.blurb-4:hover').css('color', '#ffffff');
    });

  });
})(jQuery);

Answer 1

这里有一个方法。简化HTML结构和JS代码。利用样式表类进行所需的悬停更改.这个例子只做一个和两个按钮。

​

$(".blurb").click(function() {
      $("body").removeClass(["b1", "b2", "b3", "b4"]);
      $("body").addClass($(this).data('class'));
    })

body.b1 [data-class=b1]:hover {
  color: yellow;
}
body.b1 [data-class=b2]:hover {
  color: green;
}
body.b1 [data-class=b3]:hover {
  color: red;
}
body.b1 [data-class=b4]:hover {
  color: blue;
}
body.b2 [data-class=b1]:hover {
  color: indigo;
}
body.b2 [data-class=b2]:hover {
  color: orange;
}
body.b2 [data-class=b3]:hover {
  color: brown;
}
body.b2 [data-class=b4]:hover {
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button data-class='b1' class='blurb'>Blurb 1</button>
<button data-class='b2' class='blurb'>Blurb 2</button>
<button data-class='b3' class='blurb'>Blurb 3</button>
<button data-class='b4' class='blurb'>Blurb 4</button>

​