用 cursor 在 hover 上更改背景颜色

Question

我有一个按钮菜单。 根据列表中元素的数量（例如，myList = ["A", "B", "C"]），我显示相同数量的按钮。 例如，myList 将创建一个包含 3 个按钮的菜单。

在 javascript 插件中显示按钮的代码：

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

当用户使用 cursor 将鼠标悬停在按钮上时，我正在尝试更改每个按钮的背景颜色。 例如，在 hover 上，“A”可能会变成蓝色，“B”可能会变成黄色，而“C”可能会变成绿色。 但是，我不知道如何在 css 中做到这一点，因为每个按钮都没有设置 id。

我需要我的代码尽可能通用，因为在其他情况下，列表可能是“D”和“E”。 在另一个示例中，有 2 个按钮可能会在 hover 结束时变为橙色和紫色。

有没有人有解决这个问题的建议？ 提前谢谢了！

下面是功能代码的玩具版本：（但请注意，这是不正确的，因为此示例通过给按钮 id 来显示按钮。同样，在实际版本中，我使用上面的代码，以便它可以推广到所有列表我可能会通过它。在这个例子中，你可以看到 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>

（如果需要任何澄清，我很高兴收到有关如何编辑我的帖子以使其更清晰的反馈。谢谢！）

Answer 1

你可以这样做：

 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>

用 cursor 在 hover 上更改背景颜色

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-06-12 10:28:27

用 cursor 在 hover 上更改背景颜色

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-06-12 10:28:27

解决方案1
0 已采纳 2020-06-12 10:28:27