CSS：懸停 - 如何讓較低的DIVs：懸停以及？

Question

Here就是一個例子。我正在尋找光標所在的行和列，以顯示：hover屬性。有沒有辦法做到這一點，而不需要JavaScript？如果沒有，jQuery中有一個簡單的方法可以爲任何數量的行/列進行此操作嗎？

Answer 1

不與css一樣，只有一個元素被懸停（來自重疊的非嵌套元素）。

jQuery的可以幫助，但它不是小事..

粗的實現是

• 添加.row和.col類的元素（適當）
• 綁定一個自定義事件處理程序檢查鼠標座標是否在他們的框內，並設置/取消懸停狀態
• 當鼠標移動到內部時t他的行和cols的容器（你應該將它們包裝在一個），創建事件（我們綁定到行列數自定義類型的），並啓動它在全球

HTML

<div id="container"> 
    <div id="row1" class="row"></div> 
    <div id="row2" class="row"></div> 
    <div id="col1" class="col"></div> 
    <div id="col2" class="col"></div> 
</div> 

的JavaScript

$('.col, .row').bind('intersect',function(e){ 
    var $me = $(this); 
    var pos = $me.offset(); 
    var size = {w:$me.width(), h:$me.height()}; 

    if (e.pageX > pos.left && e.pageY > pos.top && e.pageX < pos.left + size.w && e.pageY < pos.top + size.h) 
    { 
     $me.addClass('hover'); 
    } 
    else if ($me.is('.hover')) 
    { 
     $me.removeClass('hover'); 
    } 
}); 

$('#container').mousemove(function(e){ 
    var evt = jQuery.Event('intersect'); 
    evt.pageX = e.pageX; 
    evt.pageY = e.pageY; 
    $.event.trigger(evt); 
}); 

演示：http://jsfiddle.net/gaby/7V8AN/

Answer 2

如果你使用一個表，你可以通常只是做這樣的事情：

tr:hover > td { 
    background-color: yellow; 
} 

...但如果你有不嵌套元素，只有其中一人將被視爲:hover版。您必須使用JavaScript將懸停狀態傳播到位於其下的其他元素。

Answer 3

我會使用jQuery的兄弟姐妹：

$("#row1").siblings("#row2").css(attr, value); 

或者你可以使用.class或類似的東西。