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

Question

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

当我从 div 开始然后移动到 span 时，它似乎有效，但反之则不然。如果我在一个跨度上——它会被勾勒出轮廓，但是如果我将鼠标从它移动到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 block 中有一些JS，而且我认为你不需要跟踪鼠标移动，你可以只绑定(bind)到悬停功能。 IE。使用这个 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 )

编辑

在您的评论中，您寻找一种更通用的方法，如果我们创建一个“可引发”类来定义我们可以概述/引发的事物，那么我们可以尝试做一些聪明的事情，在 parent 中关闭该类。然而，这依赖于悬停事件以正确的顺序发生。代码如下:

function mouseIn() {
    $(this).parent().removeClass('outline'); 
    $(this).addClass('outline'); 
}

function mouseOut() {
    $(this).removeClass('outline');     
}

$('.raiseable').hover(mouseIn, mouseOut);

( Fiddle )

但是，正如您所看到的，悬停事件并不总是以正确的顺序发生，因此我们不能依赖于此。

我们可以使用该逻辑以及之前添加某些内容来指示鼠标位置的逻辑。我们将添加另一个类来指示鼠标所在的位置，而不是添加数据元素，因为以后使用起来更容易。然后我们可以遍历每个 raiseable 类，看看它是否有 hasMouse 的子级，如果有，那么它不会被概述，循环最终将概述最后一个元素有鼠标，但没有拥有鼠标的 child 。

代码如下:

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 )

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