如何使用 sass 将父 div 定位在子 div 的焦点上。？

Posted 2023-03-06

【中文标题】如何使用 sass 将父 div 定位在子 div 的焦点上。？

【英文标题】：how to target parent div on focus of child div using sass.?

【发布时间】：2019-07-13 08:11:03

【问题描述】：

我怎样才能让它专注于输入来改变文本的背景颜色..？ 我到底做错了什么？ 请告诉我.. 谢谢

.parent_div 
  background: lightblue;
  .child_div 
    input 
      color: grey;
      background: blue;
      &:focused 
        color: purple;
        background: white;
      
      &:focused~grand-child-of-parent 
        opacity: 0.7;
        background: red;
      
    
  

<div class="parent_div">
  <div class="first_child">
    <input type="text" />
  </div>
  <p class="second_child"> is simply dummy text of the printing and typesetting industry.</p>
</div>

【问题讨论】：

CSS: Change parent on focus of child的可能重复

【参考方案1】：

很遗憾，这是不可能的，因为没有“祖父”选择器。

当输入获得焦点时，您可以更改输入本身的背景和文本，但如果不使用 javascript，则无法修改父元素的样式。

对于这种情况，通过 JavaScript 监听焦点事件并添加/删除修饰符类，例如父元素。

html：

<div class="parent-class">
  <input class="field" type="text" />
  <div class="child-class">
    <p>Bla</p>
  </div>
</div>

CSS：

.child-class 
  background: red;

.focused .child-class 
  background: green;

JavaScript (jQuery)：

$('.field').on('focus', function() 
  $(this).parent().addClass('focused');
)
$('.field').on('blur', function() 
  $(this).parent().removeClass('focused');
)

【参考方案2】：

实际上这现在有点可能，但在任何情况下都不可能：

在:focus-within (https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within) 的帮助下。

.parent_div 
  background: lightblue;


.parent_div .first_child .input 
  color: grey;
  background: blue;


.parent_div .first_child .input:focus 
  color: purple;
  background: white;


.parent_div:focus-within 
  opacity: 0.7;
  background: red;

<div class="parent_div">
  <div class="first_child">
    <input class="input" type="text" />
  </div>
  <p class="second_child"> is simply dummy text of the printing and typesetting industry.</p>
</div>