Question

当用户专注于输入时，我正在尝试对元素应用效果。我已经读过，我可以通过使用css选择器（+，〜，＆gt;）而不使用jQuery来实现这一点。那么问题是客户端使用Contact From 7来呈现大量代码。

这是代码

<div class="theInput">
    <span class="wpcf7-form-control-wrap your-name">
        <input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required effectForm" aria-required="true" aria-invalid="false" />
    </span>
    <span class="theLabel" id="your-name">Name</span>
</div>

正如您所看到的，“跨度”来自联系表单7.我正在尝试使用css选择器“+”来翻译类 theLabel 。

到目前为止我尝试了什么

最后的想法是关于类

更详细

span.wpcf7-form-control-wrap.your-name input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required.effectForm:focus + .theLabel{
    transform:translateY(-25px);
    }

一种想法是通用的

input:focus + .theLabel

其他想法过于通用

input:focus .theLabel

以及更多其他组合，所有这些组合都失败了。我知道我做错了什么。但我找不到什么。

谢谢：）

Answer 1

您正在尝试使用CSS选择父元素的兄弟。请参阅此相关答案：CSS: how to select parent's sibling

如果可以编辑HTML，则可以将输入HTML元素移动到与span.theLabel元素相同的DOM层次结构级别，以便使用CSS同级选择器（+）。一个例子是this fiddle。

HTML

<!-- the span wrapper around the input has been removed, moving the input to the same
DOM tree level. -->

<div class="theInput">
  <input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required effectForm" aria-required="true" aria-invalid="false" />
  <span class="theLabel" id="your-name">Name</span>
</div>

CSS

/* Note the display:inline-block needed for the transform to work as well as vendor
prefixes */

input.wpcf7-text:focus + span {
            display: inline-block;
  -webkit-transform: translateY(-25px);
      -ms-transform: translateY(-25px);
          transform: translateY(-25px);
}

如果您无法更改HTML标记，则需要使用javascript选择span.theLabel，如顶部链接答案中所示。

更改输入焦点上元素的translateY

1 个答案: