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

Posted 2023-05-08

【中文标题】单击div时如何更改多条文本的悬停颜色？

【英文标题】：How to change the hover color on multiple pieces of text when you click on a div?

【发布时间】：2022-01-13 19:44:27

【问题描述】：

这是我遇到问题的页面 - http://impdigitaldev.site/home-v2-services-test/

只需向下滚动到服务部分，即可查看我在此问题中所指的菜单。

所以...

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

但是，如果未选择菜单中的某个项目，则文本应具有将文本变为橙色的悬停。它目前有。

我遇到的挑战是，当您选择一个菜单项时，背景会变为橙色。文本悬停仍然设置为橙色 - 这会产生一些问题。

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

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

当您单击一个 div 时，我在消除悬停效果方面取得了一些成功，但是当您单击另一个 div 时，我还没有想出将悬停效果重置为常规的橙色悬停。

我删除了我之前正在试验的代码的 sn-p，它确实将活动菜单项上的悬停颜色更改为白色，但在您选择其他菜单项后它不会切换回橙色。

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

（请客气，我真的像 2 周前一样开始尝试 java/jquery 哈哈，所以这段代码可能是垃圾）

感谢任何帮助，谢谢！

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

【问题讨论】：

欢迎！首先我建议你做一个 sn-p 或 jsfiddle。另外，这段代码工作正常吗？我建议您清理问题以更加关注问题，而不是解释页面中出现的所有内容

【参考方案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>