CODEWITHSUNDEEP
htmlcss
user1195192
user1195192

Reputation: 699

CSS- Change both child and parent on hover

So I have two classes: parent and child. parent class is basically a Square and child class contains the text within the Square. I am trying to change the background color of parent and text color of child on hover over parent. This is what I have so far,which only changes the parent's background color: 

.parent:hover {
    background-color: #FFCC00;
}

I tried this as well but it didnt help: 

.panel-body:hover .child {
    background-color: #FFCC00;
    color: #FFFFFF;
}

Edit: Since none of the solutions are working. I am adding the HTML code piece.

<div class="parent">
    <span class="arrow1"><i class="left-arrow" role="numerical"></i></span>
        <div class="child ng-binding">
             Child Text needing color change
         </div>
         <div class="child-2 ng-scope">
             No change needed for this text
         </div>
</div>

Upvotes: 0

Views: 1196

Answers (5)

jaunt
jaunt

Reputation: 5088

I believe you want a combination of both of your attempts like so:

.parent:hover {
  background-color: #FFCC00;
}
.parent:hover .child {
  color: #FFFFFF;
}
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js">
    </script>
<div class="parent">
  <span class="arrow1"><i class="left-arrow" role="numerical"></i></span>
  <div class="child ng-binding">
    Child Text needing color change
  </div>
  <div class="child-2 ng-scope">
    No change needed for this text
  </div>
</div>

Upvotes: 3

sukesh sudharman
sukesh sudharman

Reputation: 110

try this css along with yours this will change the color of child elements while hovering parent div 

   .parent:hover .child 
    {
    color:#fff;
    }


    .parent:hover .child-2
    {
    color:red;
    }

Upvotes: 0

Touseef Ahmed Awan
Touseef Ahmed Awan

Reputation: 359

This one will work fine as you need to do is to use two blocks. 

.parent:hover 
{
    background-color: #FFCC00;
}

.parent:hover > .child 
{
    background-color: #FFCC00;
    color: #FFFFFF;
}

Upvotes: 0

WhyEnBe
WhyEnBe

Reputation: 295

You could use:

.parent:hover .child { 
   color: #FFFFFF;
}

.parent:hover {
   background-color: #FFCC00;
}

Upvotes: 0

Peyman Mohamadpour
Peyman Mohamadpour

Reputation: 17944

Why don't you just like this:

.parent:hover {
    background-color: #FFCC00;
}

.parent:hover .child{
    background-color: #FFCC00;
    color: #FFFFFF;
}

Upvotes: 0

Related Questions