Question

我想创建一个脚本，当我将鼠标悬停在特定元素上时会创建一个边框

我尝试使用的代码..

(function(){
  $(document.body).each(function(){
$(this).hover(
    function(){
        $(this).css('border','1px solid blue');

    },
    function(){
        $(this).css('border','none');
    }
)
  })
})()

任何帮助将不胜感激

Answer 1

当你的页面悬停在页面上时，你是否试图为页面上的每个元素添加边框？如果是这样，您可以尝试以下

<强> Live Demo

$(function(){
  $(document.body).find('*').each(function(){
        $(this).hover(
            function(){
                $(this).css('border','1px solid blue');

            },
            function(){
                $(this).css('border','none');
            }
        );
  });
});

在你的代码中，你基本上是说每个人发现添加悬停，所以事件被绑在身上。

对于特定元素，请使用div测试id进行以下操作，

$('#test').hover(
    function(){
        $(this).css('border','1px solid blue');

    },
    function(){
        $(this).css('border','none');
    }
);

关于使用jQuery selectors

的一些信息

Answer 2

为什么使用javascript只在一个或多个元素上添加悬停边框？可以使用纯CSS而无需编程。

您没有显示您的网页结构的样子，也没有说明您想要拥有边框的内容，但是如果您有这个HTML：

<div class="autoBorder">Some text</div>

然后，您可以使用此CSS在鼠标悬停时添加边框：

.autoBorder:hover {border: 1px solid #00F;}

Answer 3

使用delegate只需将mouseover / mouseout事件附加到body标签，而不是将其附加到页面上的所有元素。使用this我们可以控制css。

注意：此方法仅在body元素上附加单个事件处理程序。

$(function(){
  $('body').delegate("*", 'mouseover', function(e){
                $(this).css('border','1px solid blue');
                e.stopPropagation();

            }).delegate("*", 'mouseout', function(e){
                $(this).css('border','none');
                e.stopPropagation();
            }
        );

});

工作demo

Answer 4

// Eveything in the body
$("body *").hover(function() {
    $(this).css('border', '1px solid blue');

}, function() {
    $(this).css('border', 'none');
});



// Specific Element using an "id"
$("#e").hover(function() {
    $(this).css('border', '1px solid red');

}, function() {
    $(this).css('border', 'none');
});




// Specific elements using a "class"
$(".number").hover(function() {
    $(this).css('border', '1px solid lime');

}, function() {
    $(this).css('border', 'none');
});

您可以在http://jsfiddle.net/Shaz/3pfRx/

找到一个示例

尝试创建一个脚本，当我将鼠标悬停在该脚本上时，该脚本将围绕特定元素创建边框

4 个答案: