how to set color to button group by focus on one of buttons

Question

I have one button group with 5 button, I need to set color to button group with focus on one of theme, for example if I hover on third button I need change first there will be change color, I try to do it with this button group code :

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

Please show us what you have tried, also your description is a bit unclear about what you are trying to achieve. — Carsten Løvbo Andersen, Aug 06 '19 at 07:54

score 0 · Answer 1 · answered Aug 06 '19 at 08:02

I am not really sure what you are asking for, but I have prepared a simple snippet showing you pretty much everything you need so that you can modify it to your needs.

$(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>

how to set color to button group by focus on one of buttons

1 Answers1