使用〜来制作另一个元素更改样式

时间:2014-05-29 16:28:36

标签: html css

对于一个误导性的标题感到抱歉,很难用几句话来描述这个问题。

基本上我想要它当我将鼠标悬停在标题上时我希望块的标题获得文字下划线。

现在我有一个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;
}

1 个答案:

答案 0 :(得分:2)

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

.caption:hover p span { text-decoration: underline; }

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