jquery - CSS :hover - How to get lower DIVs to :hover as well?

Question

Here是一个例子。我正在寻找光标所在的行和列以显示 :hover 属性。有没有办法在不需要 javascript 的情况下做到这一点？如果没有，在 jQuery 中是否有一种简单的方法可以对任意数量的行/列执行此操作？

Answer 1

css 不行，因为 css 只有一个元素被悬停(来自重叠的非嵌套元素)。

jQuery 可以提供帮助，但并非微不足道..

一个粗略的实现是

• 向元素添加 .row 和 .col 类(适当)
• 将自定义事件绑定(bind)到那些事件，其处理程序会检查鼠标坐标是否在其框内并设置/取消设置悬停状态
• 当鼠标在行和列的容器内移动时(您应该将它们包裹在一个中)，创建一个事件(我们绑定(bind)到行和列的自定义类型) 并全局触发

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/