0

所以我有一组带有相应标签的跨度。我希望始终能够将鼠标悬停在标签上并查看相应的图片。

在 CSS 中，我有：

<style>
td:hover span {
    display: block;
}
</style>

我的跨度大致如下：

<td><label>firstLabel</label>
<span id="image1" class="first_image_span" style="display:block" >
<img src="image1.jpg"></span></td>


<td><label>secondLabel</label>
<span id="image2" class="second_image_span">
<img src="image2.jpg"></span></td>

<td><label>thirdLabel</label>
<span id="image3" class="third_image_span">
<img src="image2.jpg"></span></td>

如果这是我唯一的代码，它会工作得很好。问题是我必须添加按钮来手动导航图片。问题是，一旦我显示跨度 2 ，悬停在跨度 1 上停止工作。当我转到跨度 3 时，悬停在跨度 1 和 2 上停止工作。我能做些什么吗？我的 JavaScript 函数大致是这样工作的：

function changeImage(count) {
  document.getElementById(functionSpanName.toString() + slideCounter.toString()).removeAttribute("style");

  slidecounter += count;

document.getElementById(functionSpanName.toString() + slideCounter.toString()).style.display = "block";
}

起初我认为问题在于它不工作，因为没有样式.. 但是在页面加载开始时，第一个跨度是唯一有样式的跨度，所有其他悬停在其他跨度上工作。用 style.display = "none" 替换 remove 属性也不起作用，因为这意味着跨度将永久不显示。

4

1 回答 1

2

与其手动添加和删除样式，不如直接添加或删除一个类来指示所选项目。

像这样的东西：

td span {
    display: none;
}
td span.current, td:hover span {
    display: block;
}

然后像这样更改您的功能：

function changeImage(count) {
    var currId = functionSpanName.toString() + slideCounter.toString();
    document.getElementById(currId).className = '';
    slideCounter += count;
    currId = functionSpanName.toString() + slideCounter.toString();
    document.getElementById(currId).className = 'current';
}
于 2013-07-18T03:44:51.280 回答