Question

我有以下代码：

＆＃13;

.input {
    position: relative;
    height: 5.85714rem
}
.input input {
    outline: 0;
    width: 100%;
    border: none;
    background: 0 0;
    border-bottom: .07143rem solid rgba(0, 0, 0, .42);
    font-size: 1.14286rem;
    padding-bottom: .57143rem;
    position: absolute;
    bottom: 1.42857rem;
}
.input input:hover+label {
    color: rgba(0, 0, 0, .54)
}
.input input:active,
.input input:active:hover,
.input input:focus,
.input input:focus:hover,
.input input:hover {
    border-bottom: .14286rem solid rgba(0, 0, 0, .87);
    padding-bottom: .5rem
}
.input input:active+label,
.input input:focus+label {
    color: #304ffe;
    font-size: .85714rem;
    bottom: 3.85714rem
}
.input input:active+.expander,
.input input:focus+.expander {
    width: 100%;
    left: 0;
    height: .14286rem
}

.input label {
    color: rgba(0, 0, 0, .54);
    font-size: 1.14286rem;
    position: absolute;
    left: 0;
    bottom: 2.07143rem;
    font-weight: 400;
}
.input .expander {
    width: 0;
    background: #304ffe;
    position: absolute;
    height: .07143rem;
    left: 50%;
    bottom: 1.42857rem;
    -webkit-transition: all cubic-bezier(.4, 0, .2, 1) 3s;
    transition: all cubic-bezier(.4, 0, .2, 1) 3s
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="floating-input input">
   <input type="text" name="name" id="name">
   <label for="name">Name</label>
</div>

＆＃13;

.input {
    position: relative;
    height: 5.85714rem
}
.input input {
    outline: 0;
    width: 100%;
    border: none;
    background: 0 0;
    border-bottom: .07143rem solid rgba(0, 0, 0, .42);
    font-size: 1.14286rem;
    padding-bottom: .57143rem;
    position: absolute;
    bottom: 1.42857rem;
}
.input input:hover+label {
    color: rgba(0, 0, 0, .54)
}
.input input:active,
.input input:active:hover,
.input input:focus,
.input input:focus:hover,
.input input:hover {
    border-bottom: .14286rem solid rgba(0, 0, 0, .87);
    padding-bottom: .5rem
}
.input input:active+label,
.input input:focus+label {
    color: #304ffe;
    font-size: .85714rem;
    bottom: 3.85714rem
}
.input input:active+.expander,
.input input:focus+.expander {
    width: 100%;
    left: 0;
    height: .14286rem
}

.input label {
    color: rgba(0, 0, 0, .54);
    font-size: 1.14286rem;
    position: absolute;
    left: 0;
    bottom: 2.07143rem;
    font-weight: 400;
}
.input .expander {
    width: 0;
    background: #304ffe;
    position: absolute;
    height: .07143rem;
    left: 50%;
    bottom: 1.42857rem;
    -webkit-transition: all cubic-bezier(.4, 0, .2, 1) 1s;
    transition: all cubic-bezier(.4, 0, .2, 1) 1s
}

＆＃13;

在上面的示例中，单击输入会移动标签，但边框颜色不会更改。我使用的是jQuery 3.2.1。

＆＃13;

<div class="floating-input input">
   <input type="text" name="name" id="name">
   <div class="expander"></div>
   <label for="name">Name</label>
</div>

＆＃13;

label

＆＃13;

另一个例子是基本上按顺序切换.expander和<div class="expander"></div>规则。标签卡住但边框发生变化。这次我手动添加.navbar-custom .nav li a:hover{ outline:none; background-color: rgba(255,255,255,0.2); }，但它应该是自动的。

预期的结果是标签在输入上方移动并且边框改变其颜色。所以预期的结果基本上就是显示合并在一起的两个例子。

是什么导致效果不起作用以及如何解决？

Answer 1

您正在使用取决于元素顺序的CSS选择器（+）。

input:hover+.expander在.expander后立即与input:hover匹配，但不是相反。

Answer 2

而不是+它应该是~。使用~时，元素不必直接位于输入后面。

＆＃13;

$(document).ready(function() {
    $('.input').append('<div class="expander"></div>');
});

＆＃13;

.input {
    position: relative;
    height: 5.85714rem
}
.input input {
    outline: 0;
    width: 100%;
    border: none;
    background: 0 0;
    border-bottom: .07143rem solid rgba(0, 0, 0, .42);
    font-size: 1.14286rem;
    padding-bottom: .57143rem;
    position: absolute;
    bottom: 1.42857rem;
}
.input input:hover~label {
    color: rgba(0, 0, 0, .54)
}
.input input:active,
.input input:active:hover,
.input input:focus,
.input input:focus:hover,
.input input:hover {
    border-bottom: .14286rem solid rgba(0, 0, 0, .87);
    padding-bottom: .5rem
}
.input input:active~label,
.input input:focus~label {
    color: #304ffe;
    font-size: .85714rem;
    bottom: 3.85714rem
}
.input input:active~.expander,
.input input:focus~.expander {
    width: 100%;
    left: 0;
    height: .14286rem
}

.input label {
    color: rgba(0, 0, 0, .54);
    font-size: 1.14286rem;
    position: absolute;
    left: 0;
    bottom: 2.07143rem;
    font-weight: 400;
}
.input .expander {
    width: 0;
    background: #304ffe;
    position: absolute;
    height: .07143rem;
    left: 50%;
    bottom: 1.42857rem;
    -webkit-transition: all cubic-bezier(.4, 0, .2, 1) 3s;
    transition: all cubic-bezier(.4, 0, .2, 1) 3s
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="floating-input input">
    <input type="text" name="name" id="name">
    <label for="name">Name</label>
</div>

＆＃13;

为什么HTML元素顺序会影响CSS效果？

2 个答案: