將鼠標懸停在子元素上並在父級上追加scss

-1

我在子元素的hover上有一個場景，我想將樣式追加到父元素。我的代碼可以看到下面，以及here：將鼠標懸停在子元素上並在父級上追加scss

HTML：

<body> 
    <div> 
     <span>hover</span> 
    </div> 
    </body>

SCSS：

span:hover{ 
    div{ 
    border:1px solid red; 
    } 
}

在盤旋在孩子的文本，我需要設置父母的邊界div。但事情並非如此。任何幫助，將不勝感激。

來源

2017-03-17 tania saxena

檢查這個[問題]（https://jira.ascertia.com.pk/browse/SHE-5197） –

$(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>

來源

2017-03-17 07:02:57

abak 我們不能用scss做它 –

人們不能簡單地穿越了在CSS的DOM。您將需要使用JavaScript或jQuery。

下面是一篇文章，解釋了原因：http://snook.ca/archives/html_and_css/css-parent-selectors

TLDR，這是由於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>

來源

2017-03-17 07:08:36 nashcheez

我們不能用scss來做它嗎？ –

scss只是一個css預處理器，它呈現代碼並被編譯爲瀏覽器可以理解的css。因此，不能在任何預處理器中都不能在css中完成。 – nashcheez

將鼠標懸停在子元素上並在父級上追加scss

回答

相關問題