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 hover，如果在元素上运行hover，您可以在行的其余div上执行相同的操作。

同时悬停Div和Table Rows

2 个答案: