将鼠标悬停在子元素上并在父级上追加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

回答

相关问题