将光标悬停在水面上时更改背景颜色

我有一个按钮菜单。根据列表中元素的数量(例如，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>';
});

当用户将光标悬停在按钮上时，我正在尝试更改每个按钮的背景颜色。例如，悬停时"A"可能变为蓝色，"B"可能变为黄色，"C"可能变为绿色。但是，我不知道如何在 css 中执行此操作，因为每个按钮都没有设置的 id。

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

有人对此有建议吗？提前非常感谢！

下面是函数代码的玩具版本：(但请注意，这是不正确的，因为此示例通过赋予按钮 id 来显示按钮。同样，在真实版本中，我使用上面的代码，以便它可以推广到我可能运行的所有列表。在此示例中，您可以看到所有按钮在将鼠标悬停在上方时变为红色。

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

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

你可以这样做：

	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>

相关内容

最新更新

热门标签：