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; }

http://jsfiddle.net/gnfpj/2/


Comments

Popular posts from this blog

c++ - OpenCV Error: Assertion failed <scn == 3 ::scn == 4> in unknown function, -

php - render data via PDO::FETCH_FUNC vs loop -

The canvas has been tainted by cross-origin data in chrome only -