2016-04-08 11 views
-1

の子でニレを得ることができますので、私はこのようなHTMLの構造を有する:SCSSセレクタが、私は親

<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からサイドタグをつかみたいのですが、これは可能ですか?

+0

これはあなたを助けることができます:https://css-tricks.com/child-and-sibling-selectors/ – Boratzan

+0

'text'は、兄弟や子孫の影響を受けることはありません...あなたは行けませんDOMをバックアップします。 –

+0

Sass-> CSSのコンパイルの問題がない限り、**コンパイルされたCSS **のみを投稿します。 – cimmanon

答えて

2

CSSでは、子要素の特定のアクションから親をアドレス指定することはできません.SASSはCSSを生成するだけなので、それも不可能です。

溶液を各パス要素(またはG要素経路を含む)、その後にテキスト要素を配置することができ、書き込む:

HTML:

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

SCSS:

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

HTML構造を変更したくない場合に、子要素のホバー疑似セレクタから親要素のスタイルを変更する場合は、JavascriptまたはJavascriptフレームワーク/ライブラリを使用する必要があります(li ke jQuery、Angular、React、...)を使用します。

関連する問題