文章/答案/技术大牛

发布

社区首页 >问答首页 >子女悬停时父母的风格兄弟关系

问子女悬停时父母的风格兄弟关系
EN

Stack Overflow用户

提问于 2022-03-19 10:37:09

回答 2查看 335关注 0票数 3

<div class="main">
 <div class="parent">
  <div class="content-1"> A </div>
 </div>
 <div class="content-2"> B </div>
</div>

在内容-1的悬停中，我想要将内容-2样式化。

css

html

回答 2

Stack Overflow用户

发布于 2022-03-19 11:27:49

嗯，我已经找到了一个解决方案，我从来没有使用过它，即">"符号。我用Main来做这件事，我使用了content-1，但是它对我不起作用，对我来说它就像第一个孩子和最后一个孩子，或者类似的事情。这是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Stack13</title>

    <style>
        
        .main:hover > .content-2{
            background-color: red !important;
            color: blue !important;
        }


    </style>



</head>
<body>

<div class="main">
    <div class="parent">
        <div class="content-1"> A </div>
    </div>
    <div class="content-2"> B </div>
</div>


</body>
</html>

.main{
  border: 1px black solid;
}

.content-1{
  border: 1px blue solid;
}

.main:hover > .content-2{
    background-color: red !important;
    color: white !important;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Stack13</title>
</head>
<body>

<div class="main">
    <div class="parent">
        <div class="content-1"> A </div>
    </div>
    <div class="content-2"> B </div>    
</div>


</body>
</html>

票数 0

Stack Overflow用户

发布于 2022-03-19 11:28:48

目前还不可能在CSS中将元素设置到树的更高的位置。

如果您更改了标记，则可以使用相邻的子选择器+对相邻(下一个)兄弟类进行样式设置，参见下面的示例

您提供的代码似乎与标题相矛盾，因为标题建议在代码表明两人不是同一父级兄弟姐妹的情况下设计兄弟姐妹的样式。

.content-1:hover + .content-2 {
  background-color: yellow;
}

<div class="main">
  <div class="parent">
    <div class="content-1"> A </div>
    <div class="content-2"> B </div>
  </div>
</div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/71537416

复制

相似问题

问子女悬停时父母的风格兄弟关系
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问子女悬停时父母的风格兄弟关系EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问子女悬停时父母的风格兄弟关系
EN