n rowsleftChild と rightChild の 2 つのビューに分割できるグリッドを作成しています。leftChild には rightChild と同じ数の行がありますが、leftChild はその場所にとどまります。rightChild との唯一の違いは、水平方向にスクロールできることです。leftChild または rightChild 要素にカーソルを合わせると、なんらかのホバリング効果を追加したいと考えています。これは簡単ですが、行全体にホバリング効果を追加したいのです。したがって、leftChild の 3 行目にカーソルを合わせると、rightChild の 3 行目を強調表示します。
さて、理想的には、これに似た完全な CSS ソリューションが欲しいのですが、行が互いに直接続いていないため、それは不可能です。これを解決する別の方法を考えようとしていましたが、ストレート CSS では不可能のようです。
JavaScript を入力します。次のステップは、JavaScript と CSS を組み合わせることだと考えています。行にホバー効果を追加してから、JavaScript を使用してホバー クラスを他の子の対応する行に追加できます。これは jQuery では非常に簡単ですが、ネイティブの JavaScript アプローチを探しています。
私が考えている主なアプローチは、各行クラス要素にmouseenterandを追加することです。mouseleave各行要素に 2 つのイベント リスナーを設定しているため、このアプローチはあまり好きではありません。とにかく、入力すると、ホバリングしたものの行番号を取得し、これらすべての行番号要素に hover クラスを追加します。離れるときは、ホバーですべての要素を見つけて、それに応じて削除します。対応するコードは次のとおりです。
HTML
<body onload="loaded()">
<div id="parent">
<div id="leftChild">
<div>left child</div>
<div class="row row1">some content</div>
<div class="row row2">other content</div>
<div class="row row3">more content</div>
</div>
<div id="rightChild">
<div>right child</div>
<div class="row row1">
<span class="col1">column 1 content</span>
<span class="col2">column 2 content</span>
<span class="col3">column 3 content</span>
<span class="col4">column 4 content</span>
<span class="col5">column 5 content some really long content to trigger scrolling just for the purpose of this example</span>
</div>
<div class="row row2">
<span class="col1">column 1 content</span>
<span class="col2">column 2 content</span>
<span class="col3">column 3 content</span>
<span class="col4">column 4 content</span>
<span class="col5">column 5 content some really long content to trigger scrolling just for the purpose of this example</span>
</div>
<div class="row row3">
<span class="col1">column 1 content</span>
<span class="col2">column 2 content</span>
<span class="col3">column 3 content</span>
<span class="col4">column 4 content</span>
<span class="col5">column 5 content some really long content to trigger scrolling just for the purpose of this example</span>
</div>
</div>
</div>
</body>
JS
function loaded() {
/*var parent = document.getElementById('parent');
parent.onmouseenter = function(event) {
console.log(event.target);
};
parent.onmouseleave = function(event) {
console.log(event.target);
};*/
var rows = document.getElementsByClassName('row');
for (var i = 0; i < rows.length; i++) {
rows[i].onmouseenter = function(event) {
var splits = event.target.className.split(" ");
var elems = document.getElementsByClassName(splits[splits.length - 1]);
for (var j = 0; j < elems.length; j++) {
elems[j].className += " hover";
}
};
rows[i].onmouseleave = function(event) {
var hovers = document.getElementsByClassName('hover');
var len = hovers.length;
for (var j = 0; j < len; j++) {
hovers[0].className = hovers[0].className.replace(/\shover(\s|$)/, '');
}
};
}
}
CSS
.row:hover, .hover {
background-color: lightblue;
}
.row {
height: 50px;
padding: 5px;
white-space: nowrap;
}
.row > span {
display: inline-block;
border: 5px solid black;
}
#leftChild, #rightChild {
float: left;
}
#rightChild {
width: 300px;
overflow: auto;
}
#rightChild .row {
display: inline-block;
}
jsFiddle :ここ
そこで、いくつか知りたいことがあります。
- これはストレートCSSだけで可能ですか?
- そうでない場合、どうすればアプローチをより効率的にすることができますか?
- 1 つのイベント ハンドラーと複数のイベント ハンドラーのどちらが効率的ですか?
ここでたくさん質問していることはわかっていますが、複数の質問をするのは嫌いです。特に、同じことを繰り返す必要がある場合はなおさらです。助けていただければ幸いです。ありがとう！