js 分别给多个span标签设置不同的悬停显示内容
时间: 2023-11-13 16:04:15 浏览: 31
可以使用JavaScript为多个`<span>`元素分别设置不同的悬停显示内容。一种简单的方法是在每个`<span>`元素上添加一个`data`属性,用于存储该元素的悬停显示内容,然后使用JavaScript在元素上设置悬停事件,如下所示:
HTML代码:
```html
<span data-tooltip="这是第一个<span>元素">第一个</span>
<span data-tooltip="这是第二个<span>元素">第二个</span>
<span data-tooltip="这是第三个<span>元素">第三个</span>
```
JavaScript代码:
```javascript
var spans = document.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
var span = spans[i];
var tooltip = span.getAttribute('data-tooltip');
span.addEventListener('mouseover', function() {
showTooltip(this, tooltip);
});
span.addEventListener('mouseout', function() {
hideTooltip(this);
});
}
function showTooltip(element, tooltip) {
var tooltipDiv = document.createElement('div');
tooltipDiv.className = 'tooltip';
tooltipDiv.innerHTML = tooltip;
element.appendChild(tooltipDiv);
}
function hideTooltip(element) {
var tooltipDiv = element.getElementsByClassName('tooltip')[0];
element.removeChild(tooltipDiv);
}
```
在这个例子中,我们使用`getElementsByTagName()`方法获取所有的`<span>`元素,然后遍历每个元素,为其添加悬停事件。在悬停事件中,调用`showTooltip()`函数显示悬停提示框,并调用`hideTooltip()`函数隐藏提示框。`showTooltip()`函数会创建一个`<div>`元素作为提示框,并将其追加到悬停的`<span>`元素中。`hideTooltip()`函数会查找并删除当前悬停的`<span>`元素中的提示框。提示框的样式可以通过CSS进行自定义。