我正在创建一个网格，它可以具有n rows并分为两个视图：leftChild 和 rightChild。leftChild 具有与 rightChild 相同的行数，但 leftChild 保留在原来的位置。与 rightChild 的唯一区别是它可以水平滚动。当我将鼠标悬停在 leftChild 或 rightChild 元素上时，我想添加某种悬停效果……这很简单，但我想做的是在整行上添加悬停效果。因此，如果我将鼠标悬停在 leftChild 的第 3 行上，我想突出显示 rightChild 的第 3 行。
现在，理想情况下，我想要一个完整的 CSS 解决方案，类似于this，但这是不可能的，因为我的行不直接跟随彼此。我试图想出另一种解决这个问题的方法，但是直接使用 CSS 似乎是不可能的。
输入 JavaScript。我在想下一步是将 JavaScript 与 CSS 结合起来。我可以为一行添加悬停效果，然后使用 JavaScript 在另一个子项中的相应行中添加悬停类。这对于 jQuery 来说非常简单，但我正在寻找一种原生 JavaScript 方法。
我正在考虑的主要方法是在每个行类元素上添加一个mouseenterand 。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：在这里
所以我想知道一些事情。
- 这可能只使用直接的 CSS 吗？
- 如果没有，我怎样才能使我的方法更有效？
- 拥有一个事件处理程序还是多个事件处理程序更有效？
我知道我在这里问了很多问题，但我讨厌问多个问题，尤其是如果我不得不重复自己的话。我会很感激任何帮助。谢谢！