Question

所以我有这样的HTML结构：

<g>
    <text></text>
</g>
<g>
    <g> 
        <path></path>
    </g>
    <g> 
        <text></text>
    </g>
</g>

我想在psudeo之后更改文本元素css：从路径悬停，我可以用SCSS以某种方式定位它吗？这就是我所拥有的：

g{
   path{
     &:hover {
        && + g{
           text{
              opacity: 1.0 !important;
              filter: alpha(opacity=100) !important;

所以我只想从路径标签css中抓取g标签，这可能吗？

Answer 1

在CSS中，您无法通过子元素上的特定操作来处理父级...因为SASS只生成CSS，所以它也是不可能的。

解决方案可能是在每个路径元素（或包含路径的g元素）中放置一个文本元素，然后写入：

HTML：

<g>
    <g> 
        <path>
             <text></text>
        </path>
    </g>
</g>

SCSS：

g {
   g:hover > path > text {
       color: #FFF;
   }
}

如果您不想修改HTML结构，并且想要从子项的悬停伪选择器修改父元素的样式，则应使用Javascript或Javascript框架/库（如jQuery，Angular，React），...）。

SCSS选择器，我可以在父母的孩子身上得到榆树

1 个答案: