2

好的，假设我有一个类似的结构，如下所示：

<div comp-id='one'>
    <div comp-id='two'>
         <div comp-id='three'>
         ...
         </div>
    </div>
</div>

我要做的就是对孩子应用悬停效果（在这种情况下，带有 的那个comp-id="three"）。

重要提示：我不想专门针对 [comp-id="three"]。我想针对任何孩子，无论哪种comp-id价值。在现实世界的例子中，可能有无限的嵌套[comp-id]ed div。我只需要最内心的孩子。

我想要达到的目标：

  • 用户将鼠标悬停在 上three，然后突出显示（不是 和）threeonetwo
  • 用户将鼠标悬停在 上two，然后只是 two突出显示（不是one- 当然，不是three）

我当前的 CSS 代码：

[comp-id]:hover {
    box-shadow: inset 0 0 0 2px red;
    -webkit-box-shadow: inset 0 0 0 2px red;
    -moz-box-shadow: inset 0 0 0 2px red;
    -o-box-shadow: inset 0 0 0 2px red;
}

但是，我当前的 CSS 突出显示了我不想要的所有内容。我可以想到一个基于 javascript 的解决方案。CSS呢？

警告：我不是 CSS 的专家，所以这可能真的很简单...... :-)

4

4 回答 4

2

而且......好吧......感谢@BMH，这就是有效的：

$('[comp-id]:not(.hover)').mousemove(function(e){
    $('[comp-id]').removeClass('hover');
    e.stopPropagation();
    $(this).addClass('hover');

});
于 2013-08-23T07:36:50.860 回答
1

这是一个 jQuery 解决方案：

$('[comp-id]').mousemove(function(e){
    $(this).removeClass('hover');
    $(e.target).addClass('hover'); 
}).mouseleave(function(e){
    $(this).removeClass('hover');
});

http://jsfiddle.net/sMRMz/4/

于 2013-08-23T06:56:32.377 回答
0

在 jQuery 中尝试这样的事情：

CSS：

.hoverableClass:hover {
    box-shadow: inset 0 0 0 2px red;
    -webkit-box-shadow: inset 0 0 0 2px red;
    -moz-box-shadow: inset 0 0 0 2px red;
    -o-box-shadow: inset 0 0 0 2px red;
}

JS：

function deepSearch(parent){
    var b_ClassAdd = true;
    if (!parent){
        parent = $('body');
        b_ClassAdd = false;
    }

    var allDivChilds = parent.find('div[comp-id]');
    if ((!allDivChilds || allDivChilds.length == 0) && b_ClassAdd)
        parent.addClass('hoverableClass'); 
    else
        for (var i = 0; i < allDivChilds.length; i++)
            deepSearch($(allDivChilds[i]));
}

deepSearch();

此代码未经测试，只是解决方案的一个想法。

于 2013-08-23T06:44:43.113 回答
0

您可以为此使用“>”子选择器来停止级联样式

[comp-id]:hover {
    box-shadow: inset 0 0 0 2px red;
    -webkit-box-shadow: inset 0 0 0 2px red;
   -moz-box-shadow: inset 0 0 0 2px red;
    -o-box-shadow: inset 0 0 0 2px red;
}

[comp-id]:hover > *{
  box-shadow: none;
    -webkit-box-shadow: none;
   -moz-box-shadow: none;
    -o-box-shadow: none;
}
于 2013-08-23T06:59:57.297 回答