懸停的三個並排

Question

如何使鼠標懸停在一個div上，整行突出顯示並允許用戶單擊它？我對是否使用Javascript或Jquery完全困惑。

這裏是代碼的預覽和觀看的鏈接：http://jsfiddle.net/cMpaE/

順便說一句，我使用這些作爲的ListView控件類型，所以將有多個這些中的一個頁面上。

感謝您的時間。

Answer 1

使用jQuery：

裹在一個容器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

首先創建一個名爲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"); 
}); 

---

對於問題的第二部分，用戶只有在鼠標懸停時才能點擊div，對嗎？因此，只要附上一個單擊處理您行的div，

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