时间戳

首页 > 解决方案 > 纯 CSS 专注于父元素并改变子元素的样式 [CSS / SCSS]

html - 纯 CSS 专注于父元素并改变子元素的样式 [CSS / SCSS]

问题描述

我想知道如果你专注于父元素是否有办法可以在没有javascript的情况下更改子元素的样式所以说我有

<li class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
</li>

如果您专注于父元素，我希望能够更改两个子元素的样式。所以我试着这样做..

.parent{
   &:focus{
      & .child1{
         background: green;
      }
      & .child2{
         background: green;
      }
   }
}

但这似乎不起作用，现在我知道我可以用 javascript 做到这一点，但我只是想知道是否有一种纯 CSS 方式来做到这一点？

任何帮助，将不胜感激！

标签： htmlcsssass

解决方案

是的，这是可能的，但您需要澄清和理解“关注一个元素”这个术语。

如果您的意思是鼠标悬停，也就是悬停，那么您可以将您的 SASS 更新&:hover为：

.parent{
   &:hover{
      & .child1{
         background: green;
      }
      & .child2{
         background: green;
      }
   }
}

但是，如果您确实指的是实际的焦点事件，那么您需要知道默认情况下哪些元素可以通过单击或键盘交互获得焦点。

li默认情况下不是“可聚焦的”，但您可以通过添加tabindex="0"来更改它：

<li class="parent" tabindex="0">
    <div class="child1"></div>
    <div class="child2"></div>
</li>

tabindex应该尽可能少地使用它，因为它可能会产生更大的可访问性影响。

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

推荐阅读