我需要一些 CSS 方面的帮助,我正在努力做到这一点,当鼠标悬停在#konnichiwa 上时,它会显示#konnichiwab。使用#konnichiwa:hover 和#konnichiwab:hover 更改内容时,它有效,只是选择其他 id 有问题。 编辑:抱歉,我忘了说,我也试过“+”选择器。仍然没有运气。
第二次编辑:据我了解,兄弟选择器是在代码中选择所选元素旁边的元素吗?我已经在这个问题中删除了几行,我很抱歉。 Konnichiwa 和 konnichiwab 并不相邻。这是因为我已经将konnichiwa 放在一个div 中进行样式设置,而我不想将此样式应用到konnichiwab 中。我可能可以通过删除 div 并向 konnichiwa 添加一个类来解决这个问题,但我首先想看看是否有另一种不需要它们彼此相邻的解决方案。
<span id="konnichiwa">こんにちは</span>
<div class="tbubs" id="konnichiwab">Hello</div>
#konnichiwa:hover + #konnichiwab {
color: blue;
display:block;
}
.tbubs
{
position: absolute;
margin-top: 115px;
margin-left: 35px;
background-color:#ea3030;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
color: white;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 30px;
}
.tbubs:after
{
content: "";
position: absolute;
bottom: -15px;
border-style: solid;
border-width: 15px 10px 0;
border-color: #ea3030 transparent;
display: block;
width: 0;
z-index: 1;
}
.tbubs:after
{
content: "";
position: absolute;
bottom: -15px;
border-style: solid;
border-width: 15px 10px 0;
border-color: #ea3030 transparent;
display: block;
width: 0;
z-index: 1;
}
最佳答案
要使该选择器按预期工作,#konnichiwab
应该在内部 #konnichiwa
。目前他们是兄妹。
您可以使用 adjacent sibling selector 来解决这个问题。
#konnichiwa:hover + #konnichiwab {
color: blue;
display:block;
}
关于html - #thing1 :hover #thing2 {} not working?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23101901/