【问题标题】:change separate element style on focus on other element [duplicate]更改单独的元素样式以关注其他元素[重复]
【发布时间】:2020-12-20 10:25:48
【问题描述】:

如何让它发挥作用? HTML

#nav input[type=text]:focus ~ #two {
   color: red;
}
<div id=nav>
  <input type="text" placeholder="Search" name="search">
</div>
<div id="two">Two jfjsoijfoisoivnosnovdnsnnoivnoinsionvonoiniso</div>

我认为问题出在单独的 div 元素上。

【问题讨论】:

    标签: html css


    【解决方案1】:

    你不能。只有当元素是:focus 的兄弟或子元素时才有可能。

    要么使用 Javascript,要么将 div 放在导航中(如果您无法更改 DOM 树,这可能不是您想要的)。

    #nav input[type=text]:focus~#two {
      color: red;
    }
    <div id=nav>
      <input type="text" placeholder="Search" name="search">
      <div id="two">Two jfjsoijfoisoivnosnovdnsnnoivnoinsionvonoiniso</div>
    </div>

    纯Javascript:

    var navbar = document.getElementById('nav')
    
    navbar.addEventListener('focusin', toggleClass);
    navbar.addEventListener('focusout', toggleClass);
    
    function toggleClass() {
      document.querySelector('.two').classList.toggle('redColor');
    }
    .redColor {
      color: red;
    }
    <div id=nav>
      <input type="text" placeholder="Search" name="search">
    </div>
    <div class="two">Two jfjsoijfoisoivnosnovdnsnnoivnoinsionvonoiniso</div>

    【讨论】:

    • 那么如何让它工作,有什么变化?
    • 这是一篇相关文章,解释了子选择器和同级选择器,抱怨 OP 需要缺少的功能,并演示了一些解决此问题的 jQuery 模式:css-tricks.com/child-and-sibling-selectors
    • @Lessey 通过更改您的 dom 或使用 js/jquery。我给了你两个解决方案,和一个纯 Js 解决方案。
    • 我尝试了纯js的方式,但没有奏效。 @IslamElshobokshy
    • @Lessey 它确实有效jsfiddle.net/nk3tcrhb
    【解决方案2】:

    #nav:focus-within ~ #two {
      color: red;
    }
    <div id="nav">
      <input type="text" placeholder="Search" name="search" />
    </div>
    <div id="two">Two jfjsoijfoisoivnosnovdnsnnoivnoinsionvonoiniso</div>

    您可以使用:focus-within 选择器实现此目的

    【讨论】:

    • 这是错误的jsfiddle.net/tp9m76vn,使用这个,如果nav 包含多个元素,那么焦点将发生在所有元素上。
    • 不,它不是......显然它有效
    • @Paulie_D 正如我所说,如果导航包含多个元素,则将使用所有元素。不是特别是 OP 要求的 input[type=text]
    • @Paulie_D 看到他是如何特别要求 input[type=text] 的,假设他只想要那些。
    • 这项工作如果我们有一个元素但我特别要求@IslamElshobokshy 所说的input[type=text] 元素还有其他方法吗?
    【解决方案3】:

    Css不能像jquery那样解析Dom树,所以不能解析父元素。

    ~ 运算符仅在您的元素存在于相同深度时才有效。

    <div id=nav>
        <input type="text" placeholder="Search" name="search">
        <div id="two">Two jfjsoijfoisoivnosnovdnsnnoivnoinsionvonoiniso</div>
    </div>
    

    【讨论】:

    • 那么如何让它工作呢?
    • @VickyP,您的 id 是错误的,因为在问题中它也丢失了,id="nav"
    猜你喜欢
    • 2015-10-07
    • 2017-01-06
    • 2012-09-07
    • 1970-01-01
    • 1970-01-01
    • 2016-05-30
    • 1970-01-01
    • 2018-08-12
    • 1970-01-01
    相关资源
    最近更新 更多