使用css和jquery包装html元素，如捕获（角落处的边框）

我想用一些大纲（比如捕获）来包装元素，每当鼠标悬停时，它（大纲）应该被移除，当鼠标从中移出时，我尝试了一些东西，请参见下面的代码

function getFocussed(obj) {
            var $obj = $(obj);
            var wr1 = $('<div class="ad-wr1"></div>');
            var wr2 = $('<div class="ad-wr2"></div>');

            var width = parseInt($obj.css('width'));
            var height = parseInt($obj.css('height'));

            $(wr1).css('width', width + 12);
            $(wr2).css('width', width + 16);

            $(wr1).css('height', height + 12);
            $(wr2).css('height', height + 14);

            $obj.wrap(wr1).wrap(wr2);
        }    

function getUnFocussed(obj) {
        $(obj).parent().unwrap();
        $(obj).unwrap();
    }

关于下面的html元素

<input style="width: 300px; height: 20px;" class="txt" type="text" />

工作正常（见）
但是它在聚焦时会影响其他元素，或者它不能正确使用某些边距属性（在样式上）（请参见）。
我知道这里有一些css问题，但我无法修复，有人能帮忙吗

---

基本上，我希望无论什么时候，只要任何元素集中在它的角上，都能被轮廓包裹起来，而不会干扰布局或其他元素。谢谢你

在这里，我创造了一把小提琴，我相信这就是你想要的：

HTML

<div class="outerContainer">
    <div class="absolute">
        <div>
            <div class="container">
                <input type="text" />
            </div>
        </div>
    </div>
</div>
<div class="inputPadding"></div>
<div class="outerContainer">
    <div class="absolute">
        <div>
            <div class="container">
                <input type="text" />
            </div>
        </div>
    </div>
</div>

JS

.outerContainer {
    position:relative;
}
.container {
    padding:5px;
}
.absolute {
    position:absolute;
}
.inputPadding{
    height:35px; /*height of input + container padding + wanted padding*/ /*In this case(35px):input height = 20px, container padding=5px; wanted space between inputs is 10px*/
}
.outer:before, .outer:after, .inner:before, .inner:after {
    content:'';
    position:absolute;
    height:10%;
    width:10%;
}
.outer:after {
    right:0;
    top:0;
    border-right: 3px solid black;
    border-top: 3px solid black;
}
.outer:before {
    border-left: 3px solid black;
    border-top: 3px solid black;
}
.inner:before {
    bottom:0;
    border-left: 3px solid black;
    border-bottom: 3px solid black;
}
.inner:after {
    bottom:0;
    right:0;
    border-right: 3px solid black;
    border-bottom: 3px solid black;
}

$("input").focus(function () {
    var outer = $(this).parent().parent().parent();
    var inner = $(this).parent().parent();
    outer.addClass("outer");
    inner.addClass("inner");
});

$("input").focusout(function () {
    $(".outer").removeClass("outer");
    $(".inner").removeClass("inner");
});

---

首先，您是在请求解决悬停（鼠标悬停）还是聚焦问题？特别是在输入字段上——这是两个不同的东西——你可以将焦点放在输入字段上，然后将鼠标放在另一个字段上

我喜欢你的想法，创造两个覆盖，一个白色圆角，一个黑色，以创造理想的效果。 但是我不喜欢在js中创建元素，所以我只是操纵css属性

我试图找到一种解决方案，它可以应用于页面的每个元素——至少是悬停效果。焦点仅适用于可聚焦元素（如输入字段）

我将所有内容包装在自己的内容容器中。要使z索引正常工作，您需要在同一节点级别上设置“to hover”元素，就像悬停覆盖一样：

<div class="contentContainer">
    <input class="inputText focusable" name="myName" type="text" />
    <input class="inputText focusable" name="myData" type="text" />
    <div class="hoverDark"></div>
    <div class="hoverLight"></div>
    <div class="focusDark"></div>
    <div class="focusLight"></div>
</div>

您将错过覆盖的顶部/左侧和宽度/高度。它们是通过js设置的。这样，你就可以在一个完整的表单，文本区域，单选按钮等上使用效果

最后，js。首先，我开始隐藏覆盖div，以避免页面上出现黑色1px点。不幸的是，如果通过css将可见性设置为隐藏，.show（）将不起作用。因此，前四行是必需的

    $(".hoverDark").hide();
    $(".hoverLight").hide();
    $(".focusDark").hide();
    $(".focusLight").hide();

接下来，我们将mouseover处理程序绑定到所有元素，并使用类“focusable”。 [.hover（）]/）可用于在其内部定义mousein和mouseout事件，这就是为什么在这里使用它。当然，第一个函数用于mousein处理程序。 我们首先获取悬停元素的尺寸（包括边距、填充和边框）和位置。由于位置总是从0开始，我们必须减去1px来定义覆盖的目标位置，以使悬停的元素正确居中

$(".focusable").hover(function () {
    var elemOuterWidth = $(this).outerWidth(true);
    var elemOuterHeight = $(this).outerHeight(true);
    var elemPos = $(this).position();
    var elemPosTop = elemPos.top - 1;
    var elemPosLeft = elemPos.left - 1;

设置这些变量后，我们将位置、宽度和高度应用于悬停覆盖

    $(".hoverDark").css({
        "width": elemOuterWidth,
            "height": elemOuterHeight,
            "top": elemPosTop,
            "left": elemPosLeft
    });

    $(".hoverLight").css({
        "width": elemOuterWidth,
            "height": elemOuterHeight,
            "top": elemPosTop,
            "left": elemPosLeft
    });

很简单，不是吗？ 我们现在需要做的就是显示覆盖层。.stop（）用于防止鼠标在可聚焦区域上移动时闪烁

    $(".hoverDark").stop(true, true).show();
    $(".hoverLight").stop(true, true).show();

就这些。哦，不。。。我忘了，我们需要灭鼠器。好吧，那是个无名小卒：

}, function () {
    $(".hoverDark").stop(true, true).hide();
    $(".hoverLight").stop(true, true).hide();
});

我真的不知道，如果需要在这里停下来，只要复制粘贴就行了。毕竟，现在是我的国家凌晨3点，我变得又懒又累

focusin/focusout函数基本上是相同的，悬停-只使用我的focusDark、focusLight divs，而不是悬停

看看它的实际行动，在这里：

---

鼠标悬停在灰色覆盖的区域，点击进入黑色覆盖的区域

如果您愿意，这是实现目标的一种方法，假设您的背景颜色是一致的，而不是图像或渐变：否则，最简单的方法是在photoshop或其他程序中创建一个完全符合您需要的背景图像，并添加一个

背景图像：url（“”）在<代码>上：聚焦

我想把它放在悬停上，但它很棒！，谢谢这里，我也添加了一个摆弄悬停效果，你可以添加和删除悬停或焦点或添加其他，如果你愿意，只需复制焦点和focusout事件的代码，用不同的事件粘贴它们，并复制类（更改或在末尾添加数字以创建新类），更改边框属性即可。Jsfiddle：如果元素周围有一些空白，比如Jsfiddle.net/ashokdamani/nmkr0k6o/16，该怎么办在这种情况下，将其包装在另一个div中，并给该div一个空白（或填充），如下所示：如果元素周围有一些空白，该怎么办。在一个没有移动网络的地区度假。ctwheels已经发布了最简单的解决方案——只需将内容包装在另一个容器中，并将边距应用于外部容器。如果您不喜欢所有这些包装方法，请通过减去页边距（使用.css（“margin left”）来调整elemOuterWidth和elemOuterHeight的大小，并通过将顶部和左侧页边距添加到elemPosTop和elemPosLeft来重新定位覆盖。。。但我推荐包装解决方案。

    $(".hoverDark").stop(true, true).show();
    $(".hoverLight").stop(true, true).show();

}, function () {
    $(".hoverDark").stop(true, true).hide();
    $(".hoverLight").stop(true, true).hide();
});