html - 在输入焦点上更改元素的 translateY

Question

我正在尝试在用户关注输入时对元素应用效果。我读过我可以通过使用 css 选择器(+、~、>)在不使用 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。

到目前为止我已经尝试过

最后的想法是尽可能详细地介绍类(class)

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，如顶部链接的答案所示。