Javascript 使用数据列表元素时，是否有方法显示每个选项的工具提示
所以我现在有一个游戏中不同技能的数据列表，有没有办法让它成为这样，当你把鼠标悬停在每个技能上时，它会给出一个说明该技能是什么的工具提示？它不一定是一个工具提示，只是一些功能类似的东西，如果你有一个聪明的想法如何做的话，iframe将工作 以下是网站： 如果您单击“能力”下的“编辑”按钮，它将显示三个+按钮，然后按“能力”下的一个按钮，这将创建一个新框。如果您单击此框，它将显示能力的数据列表。我希望当你悬停在一个异能上时，右边会弹出一个框来解释这个异能 以下是代码的链接： 可以在script.js第108行找到数据列表 如果您有任何澄清问题，请随时提问！Javascript 使用数据列表元素时，是否有方法显示每个选项的工具提示,javascript,html,css,tooltip,Javascript,Html,Css,Tooltip,所以我现在有一个游戏中不同技能的数据列表，有没有办法让它成为这样，当你把鼠标悬停在每个技能上时，它会给出一个说明该技能是什么的工具提示？它不一定是一个工具提示，只是一些功能类似的东西，如果你有一个聪明的想法如何做的话，iframe将工作 以下是网站： 如果您单击“能力”下的“编辑”按钮，它将显示三个+按钮，然后按“能力”下的一个按钮，这将创建一个新框。如果您单击此框，它将显示能力的数据列表。我希望当你悬停在一个异能上时，右边会弹出一个框来解释这个异能 以下是代码的链接： 可以在script.js
谢谢大家! 问题是如何向datalist元素中的HTML选项标记添加一些onhover操作 直接的答案是你不能。你甚至不能设计单个选项的样式，尽管有些浏览器允许你使用一些，但这不是标准化的，更不用说在悬停时激发一些动作了 有一些变通办法： 自动替换所有此类元素 您可以引入一些Javascript来扫描文档，查找例如droplist或select元素，将它们设置为不显示，并在它们旁边添加“标准”元素，如模拟它们的div。您可以在下面的示例中看到对此的进一步讨论 尽管这可能很有用，例如，如果您不能完全控制所有源代码，那么它会增加一层复杂性，如果您可以自己实现HTML，这一点是不必要的 如果你控制HTML，实现你自己的选项下拉列表并不复杂，还有一个额外的优势，那就是你可以按照你希望的方式来设计东西，使它们与网站的其他部分相匹配，而不依赖于浏览器之间不一致的列表样式。 这里有一些代码可以帮助您开始。根据需要向元素添加CSS：
<head>
<style>
.select {
background-color: white;
width: 300px;
height: auto;
font-size: 16px;
border-style: solid;
padding: 10px;
}
.options {
display: none;
}
.option {
width: 100%;
height: 40px;
background-color: white;
}
.hoverinfo {
display: none;
float: right;
background-color: #eeeeee;;
}
ul {
list-style: none;
}
</style>
</head>
<body onclick="document.getElementById('select').firstElementChild.style.display='none';">
<div id="select" class="select" onclick="event.preventDefault();event.stopPropagation();this. firstElementChild.style.display='block';">
Select from this list
<ul class="options">
<li class="option" onclick="userhaschosen(this);" onmouseenter="event.preventDefault();event.stopPropagation();this.firstElementChild.style.display='block';" onmouseout="event.preventDefault();event.stopPropagation();this.firstElementChild.style.display='none';">
Option 1
<div class="hoverinfo">info about this option</div>
</li>
<li class="option" <li class="option" onclick="userhaschosen(this);" onmouseenter="event.preventDefault();event.stopPropagation();this.firstElementChild.style.display='block';" onmouseout="event.preventDefault();event.stopPropagation();this.firstElementChild.style.display='none';">
Option 2
<div class="hoverinfo">info about this option</div>
</li>
</ul>
</div>
<script>
function userhaschosen(el) {
event.preventDefault();
event.stopPropagation();
el.parentElement.style.display='none';
alert("user has chosen option "+el.firstChild.textContent);//instead of this alert, do whatever it is you want to do when the user has clicked an option
}
</script>
</div>