html - CSS 兄弟选择器替代方案

Question

我试图让一个元素在另一个元素悬停时发生变化。我知道这可以使用兄弟选择器 (~) 来完成，但它似乎不起作用。我试图找到使用兄弟选择器的替代方法，但只在我不知道的 javascript 中找到了解决方案。

我认为问题可能出在我试图将多个元素绑定(bind)到一个兄弟元素这一事实，也就是说，将鼠标悬停在 3 个不同的 div 上都会以三种不同的方式更改一个 div。我不认为有错误，虽然我可能是错的，代码在这里...

CSS

#internalContainer {
width:900px;
height:400px;
}
#sectionLeft {
float:left;
height:400px;
width:300px;
}
.leftInternal {
height:100px;
width:300px;
text-align:right;
}
#titleA {
font-size:11pt;
font-weight: bold;
text-transform: uppercase;
letter-spacing:1px;
position:relative;
top:40%;
transition:.2s
}
#sectionRight {
float:left;
width:568px;
height:400px;
margin-left:32px;
background-color:#f2f2f2;
}
#titleA:hover {
top:45%;
transition:.2s
}
#titleA:hover ~ #sectionRight {
background: #ccc;
}

HTML

<div id="internalContainer">
<div id="sectionLeft">
<div class="leftInternal"><div id="titleA">Title of One</div></div>
<div class="leftInternal"><div id="titleA">Title of Two</div></div>
<div class="leftInternal"><div id="titleA">Title of Three</div></div>
<div class="leftInternal"><div id="titleA">Title of Four</div></div>
</div>
<div id="sectionRight">
</div>
</div>

http://jsfiddle.net/xs7h8/

目前当链接悬停时没有任何变化，但它们现在都设置为做同样的事情。我打算为 titleA 创建子类并将每个子类连接到 sectionRight 但这也不起作用。

Answer 1

您不能有重复的 ID。它根本行不通。那是你的问题

此外，#titleA 不是 #sectionRight 的兄弟，因此兄弟选择器将不起作用。 #sectionRight 是他们的叔叔，因为目前没有父选择器，所以无法在悬停时使用 CSS 选择它

你也不需要在hover中重复transition，它继承自默认状态

This is the closest you can get使用您当前的设置并且没有 javascript，将悬停应用于 #sectionLeft 而不是