0

タイルの 4x4 マトリックスがあります。各タイルは基本的にdiv. 今、私は次のことをしたい：

  • マウス ポインターが特定のタイル上にある場合、そのタイルでチェックを実行する必要があります (既に行った位置などを使用して)。タイルが要件を満たしている場合、ホバー効果が必要です。

注: タイルは位置を変更し続けるため、特定のタイルには一時的にホバー効果が必要ですが、再配置後はホバー効果がない場合があります。そして、再配置は完了していません。つまり、マトリックス全体をリセットしません。数枚のタイルをシフトするだけです。

css クラスと javascript (jquery ではなくプロトタイプ) を使用してこれを実装する必要があります。クラスのホバー スタイルを設定しますhoverTile。各タイルにマウスオーバーを追加しました。ユーザーのマウスがタイルの上にあるときはいつでも関数が呼び出され、 を使用して html div 要素のクラスを設定しsetAttributeます。要約は次のとおりです。

Before:
<div> ... </div>

After:
<div class="hoverTile"> ... </div>

スタイル：

.hoverTile: hover{
    text-color: red;
}

HTMLページを検査するとクラス名が表示されますが、これは機能していないようです。ここでの間違いは何ですか？

4

3 に答える 3

2

ここで私があなたのためにセットアップしたデモを見てください

2 つの問題:

1) seudo-selector ( :hover) のコロン ( :) の後にスペースを入れてはいけません。

2）text-colorちょうどあるべきですcolor

于 2012-05-18T05:27:24.247 に答える
1

Micron と Igo はおそらくあなたの質問に答えましたが、追加することで同じ効果を達成できることを付け加えたいと思います div:hover { color: red; } (hoverTile クラスは必要ないかもしれません)。

境界線の色 border-color:red;は機能するはずです。[ W3schools ] .hoverTile { border: 5px solid #ff0000; }あなたの計画では。

于 2012-05-22T21:21:07.410 に答える
0

あなたのCSSは

.hoverTile:hover {
    color: red;
}

not text-color（CSSプロパティではありません）。それがそれを修正することを願っています。

編集：また、私が正しく理解していれば、hoverTileマウスオーバーでクラスを追加していますか？その場合、:hoverCSSに疑似クラスはまったく必要ありません。hoverTileただし、mouseoutでクラスを削除してください。

于 2012-05-18T05:24:30.690 に答える