1

これは完全に仮説であるため、実際にはこれに関連するコードはありませんが、それがどれほど簡単か疑問に思っていました.

たとえば、4 つのセルを持つ標準的なテーブルがあるとします。

<html>
    <head></head>
    <body>
        <table>
            <tr>
                <td>Cell 1</td>
            </tr>
            <tr>
                <td>Cell 2</td>
            </tr>
            <tr>
                <td>Cell 3</td>
            </tr>
            <tr>
                <td>Cell 4</td>
            </tr>
        </table>
    </body>
</html>

セル 2 にカーソルを合わせて、セル 3 に画像を表示したいのですが、これは JavaScript を使用して可能ですか?

4

3 に答える 3

1

純粋な JavaScript を使用した、より一般的な例を次に示します。tdすべてのの次の背景を変更しますtd。最後の 1 つは、最初の背景を変更します。background-image背景画像への設定は、代わりに使用する CSS を変更するのと同じくらい簡単ですbackground-color。

jsフィドル

JavaScript

var tds = document.querySelectorAll('td');
for (var i = 0; i < tds.length; i++) {
    tds[i].onmouseover = (function (i) {
        return function () {
            tds[(i + 1) % tds.length].className = 'hovered';
        }
    })(i);
    tds[i].onmouseout = (function (i) {
        return function () {
            tds[(i + 1) % tds.length].className = '';
        }
    })(i);
}

CSS

.hovered {
    background-color:#F00;
}
于 2013-03-18T13:26:33.513 に答える
1

このコードを試してみてください。これはまさにあなたが求めたとおりであり、それ以上でもそれ以下でもないことに注意してください。保守可能なソリューションが必要な場合は、(ID ではなく) クラスを使用してこのコードを適切に拡張する必要がありますが、それはこの質問の範囲を超えています。

<html>
    <head></head>
    <body>
        <table>
            <tr>
                <td>Cell 1</td>
            </tr>
            <tr>
                <td id="hoverover">Cell 2</td>
            </tr>
            <tr>
                <td id="changeme">Cell 3</td>
            </tr>
            <tr>
                <td>Cell 4</td>
            </tr>
        </table>
        <script>
            var hoverEl = document.getElementById('hoverover'),
                changeEl = document.getElementById('changeme');

            hoverEl.addEventListener('mouseover', function() {
                changeEl.innerHTML = '<img src="/path/to/image" />';
            }, false);
            hoverEl.addEventListener('mouseout', function() {
                changeEl.innerHTML = 'Cell 3';
            }, false);
        </script>
    </body>
</html>
于 2013-03-18T13:19:25.270 に答える
0

css のみを使用してそれを達成しようとすることができます。役立つかもしれないセレクターが少なくとも 2 つあります。

1つ目は+、2つ目はnth-child()です。したがって、常に表のセル n+1 に画像を表示したいとします。ここで、n はホバリングしているセルです。

<table>
  <tr>
    <td>Cell 1</td>
  </tr>
  <tr>
    <td><img src="yoursource.jpg"></td>
  </tr>
  <tr>
    <td>Cell 3</td>
  </tr>
  <tr>
    <td><img src="yoursource2.jpg"></td>
  </tr>
</table>

この方法で試すことができます：

img { display: none; }
tr:hover + tr img { display: block; }

または、css3 セレクターを使用してルールを作成できます。

img { display: none; }
tr:nth-child(n+1):hover + tr img { display: block; }

css のみを使用してそれを行う方法は他にもいくつかあると思いますが、もちろん、コードに既に画像がある場合にのみ機能します (画像を表示するだけにするか、読み込むだけにするかは正確ではありませんでした)。

実施例

于 2013-03-18T14:01:39.177 に答える