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";
}

最初は、スタイルがないために機能していないことが問題だと思っていました..しかし、ページロードの開始時に、最初のスパンはスタイルを持つ唯一のスパンであり、他のすべてのホバーは他のスパンで機能します。また、remove 属性を style.display = "none" に置き換えても、スパンが永続的に表示されないことを意味するため、機能しません。

4

1 に答える 1