3

I want to change color of all p element when card div is hovered. But in this code all p element is not changing at a time. How could I do that? 

<html> <style>
  #card {
    width: 370px;
    height: 570px;
    background-color:  white;
    position: absolute;
    top: 1390px;
    left: 200px;
        

}
#card:hover{
    background-color: #63C2A1;
    display: block;
}
#card p.name {
    font-family: DOSIS;
    font-weight: light;
    font-size: 22px;
    position: absolute;
    left: 139px;
    top: 210px;
color:#1F2B40;
    display: block;
   
}
#card p.add {
    font-family: Oswald;
    font-weight: lighter;
    position: absolute;
    left: 120px;
    top: 247px;
    font-size: 29px;
    color: #434445;
    line-height: 50%;
display: block;
}
#card p.info {
    font-family: Open Sans;
    font-weight: lighter;
    color:#434445;
    position: absolute;
    top: 260px;
    padding: 70px;
    text-align: center;
    display: block;
}
        #card p {
      display:  inline-block;
          }
#card p:hover{
    color: white;
} </style>
     <div id="card">
           

               <p  class="name" >  
               Sam Fellig </p><p  class="add">New York,US</p>
            <p class="info"   > From a non-technical guy with an idea to  building one of 
            TIME's Top 50 sites of 2013, Sam Fellig's story is nothing less  than 
            magical. But the founder of Outgrow.me says anyone can learn, as long as
              they stay positive.</p>
         
          </div>
    <html>
HaveNoDisplayName
  • 8,291
  • 106
  • 37
  • 47
Mahmud hasan
  • 918
  • 10
  • 13

2 Answers2

3

Use element > element CSS selector to select elements with a specific parent.

Code: Instead of 

#card p:hover{
    color: white;
}

Do:

#card:hover > p{
     color: white;
}

Here on Hover of parent div, only all p elements of div will change it's color to white.

Check out Fiddle.

#card {
  width: 370px;
  height: 570px;
  background-color: white;
  position: absolute;
  top: 0px;
  left: 0px;
}
#card:hover {
  background-color: #63C2A1;
  display: block;
}
#card p.name {
  font-family: DOSIS;
  font-weight: light;
  font-size: 22px;
  position: absolute;
  left: 139px;
  top: 210px;
  color: #1F2B40;
  display: block;
}
#card p.add {
  font-family: Oswald;
  font-weight: lighter;
  position: absolute;
  left: 120px;
  top: 247px;
  font-size: 29px;
  color: #434445;
  line-height: 50%;
  display: block;
}
#card p.info {
  font-family: Open Sans;
  font-weight: lighter;
  color: #434445;
  position: absolute;
  top: 260px;
  padding: 70px;
  text-align: center;
  display: block;
}
#card p {
  display: inline-block;
}
#card:hover > p {
  color: white;
}
<body>

  <div id="card">
    <p class="name">
      Sam Fellig</p>
    <p class="add">New York,US</p>
    <p class="info">From a non-technical guy with an idea to building one of TIME's Top 50 sites of 2013, Sam Fellig's story is nothing less than magical. But the founder of Outgrow.me says anyone can learn, as long as they stay positive.</p>
  </div>
</body>
rhitz
  • 1,892
  • 2
  • 21
  • 26
  • but what is the use of this " > " ? can you tell me? – Mahmud hasan Aug 29 '15 at 13:23
  • The `parentelement > element` selector is used to select elements with a specific parent. For Eg. `#card > p` will select all the `p` element in the `div` whose `id` is card. **Note:** Elements that are not directly a child of the specified parent, are not selected. – rhitz Aug 29 '15 at 15:48
  • check the first answer here : http://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered – rhitz Aug 29 '15 at 15:50
0

Not sure, this is your solution but see this Fiddle.

You can see two solutions :

  1. pure css
  2. css + js

1. pure css

add this rule :

#card:hover *,
p:hover {
  color: white !important; /* important is not so good */
}

2. css + js

Note: To run the fiddle with the js, uncomment the last line in the js panel.

I'm just added a css rule :

#card p:hover,
#card .with-bckg {
   color: white !important; 
}

The js part is pretty simple :

  1. select the card
  2. select p child for the card
  3. apply a method both on hover (to add a class) and on out (to remove the class previously added);

$("#card").hover(onHover, onOut);

Hope it's helpfull. Regards

ollie314
  • 440
  • 1
  • 10
  • 19