3つのDivsを横に並べて表示

Question

マウスを1つのdivに重ねると、行全体がハイライト表示され、ユーザーがクリックできるようにするにはどうすればよいですか？私はJavascriptかJqueryのどちらを使用するかについて全く混乱しています。ここで

は、コードのプレビューと表示へのリンクです： http://jsfiddle.net/cMpaE/

ところで、私は、コントロールのリストビュータイプとしてこれらを使用していますので、1つのページにこれらの複数があるでしょう。

お時間をいただきありがとうございます。

Answer 1

をクリックハンドラをアタッチ：

ラップ行をコンテナのdivに、あなたは/ divの

CSSのまま入力したときにクラスを切り替えます：

.hover > div { 
    background-color: #0f0 !important; /* Only need !important to override your inline css */ 
} 

のjQuery：

$('#logoBlock,#promotionBlock,#descriptionBlock').hover(function() { 
    $(this).parent().toggleClass('hover'); 
}); 

はここで働くの例を参照してください：答えのためのhttp://jsfiddle.net/m22Gu/2/

Answer 2

最初にdivに表示するスタイルを表すhighlightと呼ばれるCSSクラスを作成し、リストボックスのその行の他のすべてのdivを表示します。

そして、生成されていますそれぞれのdivに、それはデータ属性を持つ上にある、あなたのリストボックスのどの行を識別し、それに対応するCSSクラスを与える：次に

<div data-rownum="2" class="row2" ... 

$("div[class *= 'row']").hover(function() { 
    $(".row" + $(this).data("rownum")).addClass("highlight"); 
}, function() { 
    $(".row" + $(this).data("rownum")).removeClass("highlight"); 
}); 

---

質問の2番目の部分については、ユーザーがマウスの上にあるときにdivをクリックすることができます。だから、あなたの行のdiv要素にjQueryを使って

$(document).on("click", "div[class *= 'row']", function() { 
    //click handler 
});