悬停时在div内单独绘制跨度轮廓

Question

我有一个div元素，里面有一个span，里面有一些文本。当鼠标悬停在每个元素上时，我需要向元素添加一个outline类。

当我从div开始，然后移动到span时，它似乎是有效的，但不是相反。如果我在一个span上--它是有轮廓的，但如果我将鼠标从它移到div，span上的轮廓会按预期消失，但div上的轮廓不会出现。

这是我得到的：

CSS

.outline {
    outline: 5px solid #66ff66;
}

JS

function divColor() {
    $('.myDiv').hover(
        function() {
            $('.outline').removeClass('outline');
            $(this).attr('title', 'Change background').addClass('outline');             
        },
        function () {
            $(this).attr('title', '').removeClass('outline');
        }
    );
}
function textColor() {
    $('.myText').hover(
        function() {
            $('.outline').removeClass('outline');
            $(this).attr('title', 'Change color').addClass('outline');              
        },
        function() {
            $(this).attr('title', '').removeClass('outline');
        }
    );
}
$('.myDiv, .myText').mousemove(function(){
    divColor();
    textColor();            
});

HTML

<div class="myDiv">
    <span class="myText">some text</span>    
</div>

Answer 1

你的CSS块中有一些JS，我认为你不需要跟踪鼠标移动，你可以绑定到悬停函数。即使用这个JavaScript:

$('.myText').hover(
    function() {
        $(this).mouseIn = true;           
    },
    function() {
        $(this).attr('title', '').removeClass('outline');
        $('.myDiv').addClass('outline');
    }
);
$('.myDiv').hover(
    function() {
        $(this).attr('title', 'Change background').addClass('outline');             
    },
    function () {
        $(this).attr('title', '').removeClass('outline');
    }
);

（Fiddle）

mousemove的问题是它附加到这些元素上，所以当你在这些元素之外时，它不会被调用（这是删除类所必需的）。要么你必须跟踪容器div上的所有鼠标移动，这是过度杀伤，要么做这样的事情：

function mouseIn() {
    $(this).data('mouseIn', true);
}
function mouseOut() {
    $(this).data('mouseIn', false);
    $(this).removeClass('outline'); 
}
$('.myDiv').hover(mouseIn, mouseOut);
$('.myText').hover(mouseIn, mouseOut);
$('.myDiv, .myText').mousemove(function(){
    if ($('.myDiv').data('mouseIn')) {
        // Mouse is in the div
        if ($('.myText').data('mouseIn')) {
            // Mouse is in the span
            $('.myDiv').removeClass('outline');
            $('.myText').addClass('outline');
        } else {
            // In the div but not the span
            $('.myDiv').addClass('outline');
            $('.myText').removeClass('outline');            
        }
    } 
    // No else as the span is contained in the div, otherwise the 
    // else clause would mean mouse is in the span. Since this is 
    // only called when it's inside one or other (or both) 
});

（Fiddle）

编辑

在你的评论中，你寻找一种更通用的方式，如果我们创建一个"可提升"的类来定义我们可以概述/提出的东西，那么我们可以尝试做一些聪明的事情，在家长中关闭这个类。然而，这取决于悬停事件是否按正确的顺序发生。代码看起来像：

function mouseIn() {
    $(this).parent().removeClass('outline'); 
    $(this).addClass('outline'); 
}
function mouseOut() {
    $(this).removeClass('outline');     
}
$('.raiseable').hover(mouseIn, mouseOut);

（Fiddle）

然而，正如你所看到的，悬停事件并不总是以正确的顺序发生，所以我们不能依赖它。

我们可以使用这个逻辑，以及之前添加一些东西来指示鼠标在哪里的逻辑。我们将添加另一个类来指示鼠标的位置，而不是添加数据元素，因为以后更容易使用。然后我们可以遍历每个raiseable类，看看它是否有hasMouse的子元素。如果有，那么它就不会被勾勒出来，循环最终会勾勒出最后一个有鼠标但没有有鼠标的子元素的轮廓。

代码看起来像：

function mouseIn() {
    $(this).data('mouseIn', true);
    $(this).addClass('hasMouse');
}
function mouseOut() {
    $(this).removeClass('hasMouse');
    $(this).data('mouseIn', false);
    // Still need to remove the outline class as 
    // mousemove may not be triggered outside the elements
    $(this).removeClass('outline');
}
$('.raiseable').hover(mouseIn, mouseOut);
$('.container').mousemove(function(){
    var best = null;
    $('.raiseable').each( function() { 
        // Count the number of children with the class 
        // 'hasMouse'. 
        if (($(this).children('.hasMouse').length == 0) && 
            ($(this).data('mouseIn'))) { 
            best = $(this);
        } else {
            $(this).removeClass('outline');
        }
    });
    if (best) {
        $(best).addClass('outline');
    }                         
});

新HTML:

<div class='container'>
    <div class="raiseable">
        <span class="raiseable">some text</span>   
        <span class="raiseable padded">
            <span class="raiseable">some other text</span>    
        </span>
    </div>
</div>

新CSS：

.outline {
    outline: 5px solid #66ff66;
}
.padded {
    padding: 20px;
    margin: 20px;
}

（最终Fiddle）

很可能有一种更优雅的方式来做到这一点，或者我已经错过了一些内置的东西。但这似乎奏效了，我相信你可以从那里调整它，做任何你想做的事。