Change background color upon hover over with cursor

Question

I have a menu of buttons. Depending on the number of elements in a list (eg, 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!)

Answer 1

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

Question

1 answers

solution1
0 ACCPTED 2020-06-12 10:28:27

Change background color upon hover over with cursor

Question

1 answers

solution1 0 ACCPTED 2020-06-12 10:28:27

solution1
0 ACCPTED 2020-06-12 10:28:27