jquery - 使用 css 和 jquery 包装 html 元素，例如捕获( Angular 落处的边框)

Question

我想用一些轮廓包裹元素(比如捕获)，每当悬停它时它(轮廓)应该在鼠标移出它时移除，我尝试了一些见下面的代码

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();
    }

现在我调用这些函数来获得专注和不专注。

$('input[type="text"], div').hover(function () {
                if(!ad_focused) {
                    ad_focused = true;
                    getFocussed($(this));
                }
            }, function() {
                if(ad_focused) {
                    getUnFocussed($(this));
                    ad_focused = false;
                }
            });
        });

在下面的 html 元素上

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

它工作正常(参见 http://jsfiddle.net/ashokdamani/8ppc5pq0/1/)!
但是它会在聚焦时影响其他元素，或者它也不能与某些边距属性(样式)一起正常工作(参见 http://jsfiddle.net/ashokdamani/8ppc5pq0/2/ )。
我知道这里有一些 css 问题，但我无法修复，有人可以帮忙吗？

基本上，我希望每当任何聚焦的元素都被其 Angular 上的轮廓包裹起来，而不会干扰布局或其他元素。谢谢

Answer 1

首先，您是在请求悬停(鼠标悬停)还是焦点解决方案？尤其是在输入字段上 - 这是两个不同的东西 - 您可以将焦点放在输入字段中，并将鼠标悬停在另一个字段上。

我喜欢你的想法，即创建两个叠加层，一个是白色的圆 Angular ，一个是黑色的，以创建所需的效果。但我不喜欢在 js 中创建元素，所以我只是操纵了 css 属性。

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

我将所有内容都包装在我自己的内容容器中。要使 z-index 正常工作，您需要将“悬停”元素置于与悬停叠加层相同的节点级别:

<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>

“focusable”类不会获得任何 .css 标记。它只用于通过js选择那些元素，应该得到叠加效果。由于最多可以有两种叠加效果 - 一种焦点和一种鼠标悬停，我需要四个 div。

接下来我们得到 css 标记。对于输入字段，我选择了position:relative。所以我不需要用它自己独特的绝对位置来定位每个字段。为了让 z-index 正常工作，position 必须是静态的! overlay-divs 有一些属性，不会改变。这些也固定在 css 中。

.inputText {
    position: relative; 
    top:0;
    left: 0;
    width: 300px;
    height: 20px;
    margin: 3px;
    padding: 2px;
    z-index: 10;
}

.hoverDark, .hoverLight, .focusDark, .focusLight {
    position: absolute;
    z-index: 5;
}
.hoverDark {
    border: 1px solid grey;
}
.focusDark {
    border: 1px solid black;
}
.hoverLight, .focusLight {
    border: 1px solid white;
    border-radius: 10px;
}

您会错过叠加层的顶部/左侧和宽度/高度。它们是通过js设置的。这样，您可以在完整的表单、文本区域、单选按钮等上使用效果...

最后，js。首先，我开始隐藏叠加的 div，以避免页面上出现 1px 的黑点。不幸的是，如果您通过 css 将可见性设置为隐藏，.show() 将不起作用。所以需要前四行。

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

接下来我们将鼠标悬停处理程序绑定(bind)到所有元素，类为“focusable”。[.hover()]/http://api.jquery.com/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();

就是这样。哦不...我忘了，我们需要 mouseout 处理程序。嗯，这很简单:

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

我真的不知道，如果这里需要停靠点，只需复制和粘贴就可以了。毕竟，现在在我的国家凌晨 3 点，我变得懒惰和疲倦......

focusin/focusout 功能基本相同，悬停 - 只使用我的 focusDark，focusLight div，而不是悬停......

在此处查看实际效果:http://jsfiddle.net/nmkr0k6o/4/将鼠标悬停在灰色覆盖层上，单击进入黑色覆盖层...