同时悬停 div 和表行

Question

对

特定div及其相应的表格行进行悬停效果的可能方法是什么？

假设我在表格中有 3 个div 和 3 行，我想要一种情况，当您将鼠标悬停在第一个div 上时，表格中的第一行也显示悬停效果，依此类推。

Answer 1

让我们从这个 HTML 开始：

<div class="divs">
    <div>div a</div>
    <div>div b</div>
    <div>div c</div>
</div>
<table>
    <tr>
        <td>row a</td>
    </tr>
    <tr>
        <td>row b</td>
    </tr>
    <tr>
        <td>row c</td>
    </tr>
</table>

你想要的非常简单，有几个辅助函数（qsa、on和each）：

var divs = qsa('.divs div');
var rows = qsa('table tr');
each(divs, function(div, i) {
    on(div, 'mouseover', function() {
        rows[i].classList.add('hover');
    });
    on(div, 'mouseout', function() {
        rows[i].classList.remove('hover');
    });
});

/* helpers
**************************************/
// Get elements by CSS selector:
function qsa(selector, scope) {
    return (scope || document).querySelectorAll(selector);
}
// Add event listeners:
function on(target, type, callback, useCapture) {
    target.addEventListener(type, callback, !!useCapture);
}
// Loop through collections:
function each(arr, fn, scope) {
    for (var i = 0, l = arr.length; i < l; i++) {
        fn.call(scope, arr[i], i, arr);
    }
}

演示：http://jsbin.com/bukinuhopa/edit?html,css,js,console,output

Answer 2

您可以尝试使用 JQuery 悬停，如果悬停在元素上运行，您可以在行中的其余div 上执行相同的操作。