html - 使用 ~ 使另一个元素改变样式

Question

抱歉，标题误导了，很难用几句话来描述这个问题。

基本上，我希望当我将鼠标悬停在标题上时，我希望该 block 的标题带有文本下划线。

现在我有一个 JSFiddle，它在除我悬停的字幕之外的所有其他字幕上执行此操作。

JSFiddle:http://jsfiddle.net/gNFpj/1/

CSS:

.caption {
width: 480px;
height: 270px;
float: left;
margin-left: 5px;
margin-top: 5px;
}
.caption p {
background-color: #000;
color: #FFF;
margin-top: -53px;
height: 50px;
padding: 7px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
opacity: 0.7;
font-family: Verdana, sans-serif;
font-size: 12px;
line-height: 19px;
}
.caption p span {
font-weight: bold;
font-size: 14px;
}
.caption:hover ~ .caption p span {
text-decoration: underline;
}
.caption a {
text-decoration: none;
}

Answer 1

你想要一个简单的降序选择器:

.caption:hover p span {
文本修饰:下划线；
}

http://jsfiddle.net/gNFpj/2/