Hoverディビットとテーブルの行を同時に表示

-1

特定のdivとそれに対応するテーブル行にホバー効果を与える方法はありますか？あなたが試すことができHoverディビットとテーブルの行を同時に表示

2017-01-13 Oto Obong

のは、このHTMLを見てみましょう：

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

出典

2017-01-13 00:58:36

何が欲しいのは、いくつかのヘルパー関数（qsa、on、およびeach）と非常に簡単です

<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>

ワオ。驚くばかり！！！しかし、私はWordpressのサイトにそれを統合する際に問題があります。それは仕事ではない –

@OtoObong JSの1行目と2行目のセレクタが要素構造とcssのセレクタに一致することを確認してください。あなたの新しい問題を詳細に見ることなく、私は助けることができません。 –

など、

は、私は、テーブルに3つのdivと3行があると、私はあなたが最初のdivを置くと、テーブルの最初の行が同様にホバー効果を示している状況をしたいですJQuery hoverを使用し、hoverが要素で実行されている場合は、行のdivの残りの部分で同じことを実行できます。

出典

2017-01-13 00:39:11

Hoverディビットとテーブルの行を同時に表示

答えて

関連する問題