在悬停时分别对div内的大纲跨度

Question

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

当我开始使用div然后移动到跨度时似乎工作，但不是相反。如果我在跨度上 - 它被概述，但是如果我将鼠标从它移动到div，则跨度上的轮廓将按预期消失，但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，我也认为你不需要跟踪mousemove，你可以绑定到hover函数。即使用此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）

修改

在你的评论中，你寻找一种更通用的方式，如果我们创建一个类'raiseable'来定义我们可以概述/提出的东西，那么我们可以尝试通过在父母中关闭类来做一些聪明的事情。但是，这依赖于正确顺序发生的悬停事件。代码如下：

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;
}

（Final Fiddle）

很有可能有更优雅的方式来做这件事，或者已经内置的我错过的东西。但这似乎有效，我相信你可以从那里适应它做任何你想做的事情。