javascript - 如何在悬停时选择元素

Question

将元素悬停在 HTML 上时如何选择元素。就像如果我悬停一个 div 或其子元素，那么我需要控制它。我想在它周围显示一个边框。我的代码是

jQuery(document).ready(function(){
    $(window).bind('mousemove', function(e) {
        current_id = $(e.target).attr('id');
        jQuery('#'+current_id).css('border','2px solid yellow');        
    });
});

但是如果我悬停一个特定的div，这段代码会给我控制，但我需要我可以显示一个边框，即使我悬停在一个div内，如果那个div包含一个孩子，而不是悬停它我可以在那个孩子周围得到一个边框不是那个父 div。

Answer 1

如果您只想在页面上的任何元素上显示边框，您可能可以不使用 JS，仅使用 CSS：

*:hover {
    border: 2px solid yellow;
}

（出于调试目的，最好使用outline而不是border）

Answer 2

在所有元素上使用hover事件。div我创建了一个新类来轻松应用和删除应用的样式。如果您需要将此样式应用于输入元素或 span 例如，您还可以添加更多选择器：

$('div, span, input').on('hover', ...);

<style>
    .myBorder{
        border : 2px solid yellow;
    }
</style>

$('div').on('hover', 
    function(e) {
        $(this).addClass('myBorder');
    },
    function(e){
        $(this).removeClass('myBorder');
    }
);