如何在鼠标悬停时创建div元素周围的边框 [英] How to create border around div element on mouseover

问题描述

我想在一个元素周围创建一个边框，只要鼠标在它上面。
我正在尝试使用：

I want to create a border around an element , as soon as , mouse is over it . I am trying to use:

$("body").mouseover(function(e){
    var element =  document.elementFromPoint(e.clientX,e.clientY);
    var target = $(e.target);
    if (target.is("div")) {
        element.style.border = "1px solid blue";
        currentElt = target;
    }
    element.onmouseout = function(){
        this.style.border = "0px";
    }
});

但是会发生什么，由于边界附近的DOM元素位置受到干扰。
所以，我想的是围绕该元素创建一个透明的DIV，并在鼠标移除时删除那个透明的div。

But what happens, due to border nearby DOM elements position gets disturbed. So, What I am thinking is to create a transparent DIV around that element and on mouse out remove that transparent div.

请帮我解决这个问题。我无法搞清楚。怎么做？

Please help me with this idea. I am not able to figure out. How to do this ?

推荐答案

正如其他答案所示，你可以用CSS做到这一点。

As the other answers suggest, you can do this using CSS.

但是由于边界，接近DOM元素的位置会发生什么，让
受到干扰。所以，我想的是围绕该元素创建一个透明的DIV
。并在鼠标上。删除它。

But what happens, due to border , nearing DOM elements position gets disturbed . So , What I am thinking is to create a transparent DIV around that element . and on mouse out. remove that .

在这种情况下，听起来你应该使用 outline 而不是 border 。

In that case, it sounds like you should be using outline instead of border.

div:hover {
    outline: 1px solid blue;
}

http://jsfiddle.net/thirtydot/Xuddz/

轮廓在元素上方绘制，因此其他元素的位置不会被打扰了。

Outlines are drawn "above" the element, so no other elements' positions will be disturbed.

这篇关于如何在鼠标悬停时创建div元素周围的边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！