显示和隐藏外部div当输入是焦点和非焦点与css

bjp0bcyl 于 2023-03-09 发布在其他

关注(0)|答案(1)|浏览(146)

我想用css控制一个div在输入有焦点或没有焦点时隐藏和显示，但问题是我拥有的输入在某个元素中很深，如何让div在输入有焦点时显示，在输入没有焦点时隐藏？

.v-text-field input:focus-within > .class-target {
   display: block;
}

.class-target{
   display: none;
}

<div class="v-input custom-search input-small v-text-field">
  <div class="v-input__control">
    <div class="v-input__slot">
      <div class="v-text-field__slot">
        <input id="input-17" type="text" value="">
      </div>
    </div>
    <div class="v-text-field__details">
      <div class="v-messages theme--light">
        <div class="v-messages__wrapper" />
      </div>
    </div>
  </div>
</div>

<div class="class-target">Target</div>

css

来源：https://stackoverflow.com/questions/75658020/show-and-hide-outer-div-when-input-is-focus-and-not-focus-with-css

1条答案

按热度按时间

dvtswwa31#

我想你误解了课堂上的重点
：focus-within CSS伪类在元素或其任何后代具有焦点时匹配该元素
只需从输入中删除该类即可。MDN DOC HERE

.v-text-field:focus-within + .class-target {
   display: block;
}

.class-target{
   display: none;
   width:100px;
   height:100px;
   border:1px solid;
}

<div class="v-input custom-search input-small v-text-field">
  <div class="v-input__control">
    <div class="v-input__slot">
      <div class="v-text-field__slot">
        <input id="input-17" type="text" value="">
      </div>
    </div>
    <div class="v-text-field__details">
      <div class="v-messages theme--light">
        <div class="v-messages__wrapper">
        </div>
      </div>
    </div>
  </div>
</div>

<div class="class-target">Target</div>

赞(0）回复(0）举报 2023-03-09

我来回答

显示和隐藏外部div当输入是焦点和非焦点与css

1条答案

相关问题

热门标签

最新问答