如何通过关注其中一个按钮来为按钮组设置颜色[重复]

Posted 2023-05-08

【中文标题】如何通过关注其中一个按钮来为按钮组设置颜色[重复]

【英文标题】：how to set color to button group by focus on one of buttons [duplicate]

【发布时间】：2019-12-13 17:30:52

【问题描述】：

我有一个带有 5 个按钮的按钮组，我需要将颜色设置为按钮组并专注于其中一个主题，例如，如果我将鼠标悬停在第三个按钮上，我需要先更改颜色，我会尝试这样做使用此按钮组代码：

<div class="btn-group">
     <button type="button" class="btn btn-default"><i class="far fa-star"></i></button>
     <button type="button" class="btn btn-default"><i class="far fa-star"></i></button>
     <button type="button" class="btn btn-default"><i class="far fa-star"></i></button>
     <button type="button" class="btn btn-default"><i class="far fa-star"></i></button>
     <button type="button" class="btn btn-default"><i class="far fa-star"></i></button>
</div>

【问题讨论】：

请向我们展示您尝试过的内容，您的描述对于您要达到的目标有点不清楚。

【参考方案1】：

我不太确定您要的是什么，但我准备了一个简单的 sn-p，向您展示了您需要的几乎所有内容，以便您可以根据需要对其进行修改。

$(document).ready(function()
  $(".btn",".btn-group").hover(function()
    let current_button_index = $(this).index();
    $(".btn",".btn-group").removeAttr("style");
    $(".btn:not(:eq("+current_button_index+"))", ".btn-group").css("background-color","red");
  );
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-group">
     <button type="button" class="btn btn-default"><i class="far fa-star"></i>X</button>
     <button type="button" class="btn btn-default"><i class="far fa-star"></i>X</button>
     <button type="button" class="btn btn-default"><i class="far fa-star"></i>X</button>
     <button type="button" class="btn btn-default"><i class="far fa-star"></i>X</button>
     <button type="button" class="btn btn-default"><i class="far fa-star"></i>X</button>
</div>