Change background color upon hover over with cursor

Question

I have a menu of buttons. Depending on the number of elements in a list (e.g., myList = ["A", "B", "C"]), I display the same number of buttons. For example, myList would make a menu of 3 buttons.

Code for displaying buttons in a javascript plugin:

    html += '<div id="buttonGallery">'

    // add as many buttons as there are letters
    _.map(myList, function(letters, ind) {   
      html += '<div id="button_' + letters + '" class="buttons">';
      html += '<p>' + letters + '</p></div>';
    });

I'm trying to change the background-color of each button when the user hovers over the buttons with their cursor. For example, "A" might become blue, "B" might become yellow, and "C" might become green upon hover. However, I don't know how to do this in css, because each button does not have a set id.

I need my code to be as generalizable as possible, because in other cases, the list might be "D" and "E". In this other example, there would be 2 buttons that might turn orange and purple upon hover over.

Does anyone have advice tackling this? Many thanks in advance!

Below is a toy version of functional code: (but please note that this is NOT correct, because this example displays the buttons by giving them id's. Again, in the real version, I use the above code so that it is generalizable to all lists that I may run through it. In this example, you can see that all the buttons turn red on hover over.)

<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <style media="screen">
    .buttons {
      width: 150px;
      height: 50px;
      border: solid 2px black;
      text-align: center;
      color: black;
      cursor: pointer;
      background-color: white;
      margin: 2px;
    }

    #buttonGallery {
      margin: 10px;
      padding: 10px;
      border: solid 2px black;
      width: 155px;
    }

    .buttons:hover {
      background-color: red !important;
      border: solid 3px black !important;
    }

    .selected {
      background-color: red !important;
      border: solid 3px black !important;
    }
  </style>
</head>

<body>

  <div id="buttonGallery">
    <div class="buttons">
      <p>A</p>
    </div>
    <div id="button_B" class="buttons">
      <p>B</p>
    </div>
    <div id="button_C" class="buttons">
      <p>C</p>
    </div>

  </div>

  <script type="text/javascript">
    $('.buttons').click(function() {
    $(".buttons").not($(this)).removeClass("selected");
    $(this).toggleClass("selected");
  </script>
</body>

</html>

(If any clarification is needed, I'm happy to receive feedback on how I can edit my post to be more clear. Thanks!)

You need to have a mapping or something in order to know which id would be which color. With that, it is no longer possible to keep it "generalized". — holydragon, Jun 12 '20 at 07:23
missing information, is there a color predefined for every button or can it be a random color for every button? If the color is predefined where? — M41DZ3N, Jun 12 '20 at 07:35
@M41DZ3N thanks for your question! These values will be predefined in another list that correspond to the letters. — psychcoder, Jun 12 '20 at 07:37
maybe this gives you an good idea about how to do this with javascript: https://stackoverflow.com/a/11371599/9496199 , where he sets his css style you can add your own stylings from your list. and loop through each letter and apply that styling — Ramon de Vries, Jun 12 '20 at 07:40

score 0 · Accepted Answer · answered Jun 12 '20 at 10:28

You could do it like this:

    let $buttons = $('<div id="buttonGallery">');
    let myList = ["A", "B", "C", 'D'];
    let myColors = ['red', 'green', 'blue', 'red'];
    
    
    myList.map(function(letter, index) {   
      let $button = $('<div></div>')
       .addClass('buttons')
        .attr('id', 'button_' + letter)
        .html( '<p>' + letter + '</p>')
        .on('mouseenter', function(){
          $(this).css('background', myColors[index]);
        }).on('mouseleave', function() {
         $(this).css('background', 'transparent');
        });
      $buttons.append( $button );
    });
        
    $('body').append( $buttons );

.buttons {
  width: 150px;
  height: 50px;
  border: solid 2px black;
  text-align: center;
  color: black;
  cursor: pointer;
  background-color: white;
  margin: 2px;
}

#buttonGallery {
  margin: 10px;
  padding: 10px;
  border: solid 2px black;
  width: 155px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Change background color upon hover over with cursor

1 Answers1