子要素のhoverに親要素にスタイルを追加したい場合があります。私のコードは以下の見、だけでなく、hereすることができます。子要素にマウスを乗せて親にscssを追加
HTML：
<body>
<div>
<span>hover</span>
</div>
</body>
SCSS：
span:hover{
div{
border:1px solid red;
}
}
子テキストの上にホバリングで、私は設定する必要があります親のボーダーdiv。しかし、そういうことは起こっていません。どんな助けもありがとう。
$(function() {
$("div span").hover(function() {
$(this).parents('div').toggleClass("myClass");
});
}).myClass{
border:1px solid #000;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<span>hover</span>
</div>abak scssを使用して行うことはできません –
一つは、単にCSSでDOMをトラバースすることはできません。 JavaScriptまたはjQueryを使用する必要があります。ここで
は、理由を説明する記事です： http://snook.ca/archives/html_and_css/css-parent-selectorsTLDRが、それはCSSは、ブラウザによって読み込まれる方法が原因だ、と私たちはDOMをトラバースした場合、それが倍にヒットパフォーマンスを向上させるだろうそれがプロファイルに適合するかどうかを見るためには、すべての単一ノードを複数回読み取る必要があるからです。したがって、それは単に実行可能ではありません。
Javascriptの方法
document.getElementById("child").onmouseover = function() {
this.parentNode.style.border = "1px solid red";
}<body>
<div id="parent">
<span id="child">hover</span>
</div>
</body>jQueryの道
$("#child").hover(function() {
$(this).parent().css("border", "1px solid red");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="parent">
<span id="child">hover</span>
</div>
</body>scssを使用して行うことはできませんか？ –
scssは、コードをレンダリングし、ブラウザによって理解されるようにコンパイルされたcssプリプロセッサです。だから、それはどの前のプロセッサでもCSSでは実行できません。 – nashcheez
これをチェックする[質問]（https://jira.ascertia.com.pk/browse/SHE-5197） –