-2

コードをシンプル、クリーン、効率的に保つために、ulそれぞれに同じ ID を付けています。li

スクリプト関数を適用すると、最初の にのみ適用されますli。

liホバリングされている に関数を適用するにはどうすればよいですか?

ありがとうございました

JSFIDDLE

4

1 に答える 1

1

同じ ID を持つ要素が複数あるのは正しくありません。document.getElementById は、id を持つ要素が 1 つしかないという事実に依存しているため、期待どおりの動作をしません。id の代わりに class を使用するようにコードを変更する必要があります。

または、代わりに、id に関する仮定を行わない querySelector を使用することもできます。

function openHiddenItems(evt) {
  if (evt.target.id !== 'list-item') return;
  evt.target.querySelector('#red-square').style.visibility = 'visible';
  evt.target.querySelector('#yellow-circle').style.visibility = 'visible';
}

function closeHiddenItems(evt) {
  if (evt.target.id !== 'list-item') return;
  evt.target.querySelector('#red-square').style.visibility = 'hidden';
  evt.target.querySelector('#yellow-circle').style.visibility = 'hidden';
}

また、open 関数と close 関数にイベントを渡すようにしてください。JS コードと HTML を分離することをお勧めします。

var elements = document.querySelectorAll('#list-item');

for (var i=0; i<elements.length; i++) {
  elements[i].addEventListener('mouseover', openHiddenItems);
  elements[i].addEventListener('mouseout', closeHiddenItems);
}

編集:要素が表示/非表示になる場所にカーソルを合わせると、関数間に前後の移動があります。現在ホバーされている要素が 内にあるかどうかを確認することによっても解決できます#list-item。

ここにデモがあります：http://jsfiddle.net/GfqDj/11/

于 2013-11-13T00:09:46.483 に答える