0
我創建的網格可以具有n rows，並分爲兩個視圖：leftChild和rightChild。 leftChild與rightChild具有相同的行數，但leftChild保持原位。與rightChild唯一的區別是它可以水平滾動。當我將鼠標懸停在leftChild或rightChild元素上時，我想添加某種懸停效果......這很容易，但我想要做的是在整行上添加懸停效果。因此，如果我將鼠標懸停在leftChild的第3行上，我想突出顯示rightChild中的第3行。CSS/JS：將鼠標懸停在元素上突出顯示另一個元素
現在，理想情況下，我喜歡一個完整的CSS解決方案，類似於this，但這是不可能的，因爲我的行不會直接跟在對方後面。我試圖想出解決這個問題的另一種方式，但對於直接的CSS似乎不可能。
輸入JavaScript。我正在考慮下一步是將JavaScript與CSS結合起來。我可以將一個懸停效果添加到一行，然後使用JavaScript將懸停類添加到另一個子對象的相應行中。 jQuery非常簡單，但我正在尋找一種原生的JavaScript方法。
我在考慮的主要方法是在每個行類元素上添加一個mouseenter和mouseleave。我不太喜歡這種方法，因爲那時我在每個行元素上設置了2個事件監聽器......這似乎有點低效。無論如何，當你輸入時，你可以獲得你所徘徊的行號，然後將懸停類添加到所有這些行號元素中。當你離開時，你只需找到所有懸停的元素，並相應地刪除。相應的代碼如下：
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：Here
所以我想知道一些事情。
- 這是可能的只是直的CSS？
- 如果不是，我怎樣才能讓我的方法更有效率？
- 擁有一個事件處理程序或多個事件處理程序會更高效嗎？
我知道我在這裏問很多，但我討厭提出多個問題，尤其是如果我不得不重複自己。我會很感激任何幫助。謝謝！
嗯..使用表？ ：/ –
我寧願不要，我實際上試圖使用SlickGrid（使用divs/span）...這只是一個玩具問題。 – incutonez