CODEWITHSUNDEEP
csshover
kruben
kruben

Reputation: 169

change opacity of one div by hovering over another div

I have a problem. I made a custom html5 soundcloud player and I have a playlist with images. I want to display the title of the image by hovering over the image.

for example I made a simple jsfiddle: http://jsfiddle.net/dC85Q/

At the moment the opacity only changes when I hove over the title div. But it should change when i hove over the image div. I know its possible with javascript but I dont want to use javascript for that. Is there a way to do it with css?

my html: 

<div id="song1" class="songs" onclick="song1()">
    <div id="songtitle1" class="songtitles">Hello World</div>
</div>

Upvotes: 2

Views: 4168

Answers (1)

George
George

Reputation: 36794

Use the :hover pseudo selector on .songs, but then target .songtitles and change its opacity:

.songs:hover .songtitles {
    opacity: 1;
}

JSFiddle

Upvotes: 11

Related Questions