我创建了一个弹出窗口，如果我在其中单击问号图像，它能够创建一个包含文本列表的框。它的 fiddle 是 here
我希望文本看起来像下面这样:
I am able to create a box containing list of text as shown in the fiddle but I am not sure how to change the background color of the selected portion text (eg: Support, Contact, Demo) .
例如，如果我选择或单击或将鼠标指向Support，则Support 文本部分的背景颜色应为橙色，其余部分应为橙色为黑色或如果我选择或单击或将鼠标指向 Contact，则其余文本的背景颜色应为黑色，Contact 文本具有橙色背景。
以下是来自 fiddle 的 HTML 和 CSS 片段:
HTML 片段:
<!DOCTYPE html>
<html>
<body style="text-align:center">
<br>
<br>
<br>
<br>
<br>
<br>
<div class="popup" onclick="myFunction()"><img src="https://s27.postimg.org/40rb1a2ir/questionmark2.jpg" alt="homeicon">
<div class="popuptext" id="div">
<div><span id="myPopup">Support</span><br/></div>
<div><span id="myPopup1">Contact</span><br/></div>
<div><span id="myPopup2">Demo</span><br/></div>
</div>
</div>
<script>
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById('div');
popup.classList.toggle('show');
}
</script>
</body>
</html>
CSS 片段:
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #FD8B00;
color: #fff;
text-align: left;
padding:8px 10px 10px 120px;
position: absolute;
z-index: 1;
bottom: -225%;
left: -52px;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: -10%;
left: 50%;
margin-left: -5px;
border-width: 6px;
border-style: solid;
border-color:#FD8B00 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
最佳答案
所以我在下面的回答将告诉您如何在单击按钮时更改背景颜色。假设您有以下 CSS 代码。
#div div.selected {
background-color: black;
}
然后，当用户点击一个按钮时，您需要删除之前选择的按钮并更改当前选择按钮的背景颜色。您可以使用下面的 jQuery 代码实现这一点:
$(document).ready(function(){
$('#div div').click(function(){
$('#div div.selected').removeClass('selected');
$(this).addClass("selected");
});
});
您还可以查看 Fiddle ..希望对您有所帮助..
关于javascript - 更改弹出窗口中所选部分的背景颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41176236/