CODEWITHSUNDEEP
htmlcsshover
t4d_
t4d_

Reputation: 513

CSS/HTML | Container/ Grouping CSS styles and using in one div & :hover

I have following CSS:

.bckgrnd_150 {
     background: rgba(0, 0, 0, 0.5);
     width: 150px;
     height: 100px;
     transition-duration: 2s;
}

.bckgrnd_150:hover {
     background: rgba(255, 255, 255, 0.98);
}

.bckgrnd_150 .wp {
     color: white;
}

.bckgrnd_150 .wp:hover {
     color: black;

}

Since I'm a begginer in this class, I need help. I would like to use whole code (upper) and apply it to one or simplier: When I hover over .bckgrnd_150 class (styled box as background) it will apply for everything inside the div.

There's HTML:

<div class="bckgrnd_150">
    <img alt="" src="http://files.tado-hamann.webnode.com/200001010-bd155be2cb/appbar.download.png" style="border-width: 0px; border-style: solid; margin: 0px; width: 25px; height: 25px;">
    <p class="wp">blahblah</p>
</div>

So as you can see (http://jsfiddle.net/5d4yyp9p/) hovering over a box works, but don't affect the .bckgrnd_150 .wp class (text). I would like to help; when I hover over a box, it will also affect text :hover (because I now need to hover over text to affect him).

I'm really sorry, I'm NEW. :)

Upvotes: 1

Views: 161

Answers (1)

dsgriffin
dsgriffin

Reputation: 68576

You could just use:

.bckgrnd_150:hover .wp {
  color: black;
}

Instead of

.bckgrnd_150 .wp:hover {
  color: black;        
}

As by hovering the parent, it will apply on the child elements also.

jsFiddle here.

Upvotes: 3

Related Questions