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或类似的东西。