html - Using ~ to make another element change style -
sorry misleading title, pretty hard describe problem in few words.
basically want when hover on caption want headline block text underline.
right have jsfiddle on every other caption 1 hovering.
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 { text-decoration: none; }
you want simple descending selector:
.caption:hover p span { text-decoration: underline; }
Comments
Post a Comment