CSS：悬停 - 如何让更低的DIV：徘徊？

Question

Here就是一个例子。我想要获取光标所在的行和列以显示：hover属性。有没有办法在不需要javascript的情况下执行此操作？如果没有，jQuery中有一个简单的方法可以为任意数量的行/列进行此操作吗？

Answer 1

不使用css，与css一样，只有一个元素悬停（来自重叠的非嵌套元素）。

jQuery可以提供帮助，但这不是一件容易的事。

粗略的实施将是

• 将.row和.col类添加到元素中（视情况而定）
• 将自定义事件绑定到那些，其处理程序检查鼠标坐标是否在其框内并设置/取消设置悬停状态
• 当鼠标移动到行和列的容器内时（你应该将它们包装在一个中），创建一个事件（我们绑定到行和列的自定义类型的 < / em>）并全局解雇

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