CODEWITHSUNDEEP
htmlcss
Mathematics
Mathematics

Reputation: 7628

Hover effect on parents child's child

I want on hover on parent, child's child's TEXT ONLY turn red too. Is it possible ?

<div id="row">o
    <div id="col" class="col">o o
        <div id="colChild" class="col-child">o o o Turn Me Red</div>
    </div>
</div>

CSS

#row {
    width: 300px;
    height:100px;
    border: 3px solid red;
}
#row:hover {
    background-color:pink
}
#col{
    padding:5px;
    border: 2px solid blue;
}
#colChild {
    padding:5px;
    border: 2px solid black;
}

http://jsfiddle.net/NHbn8/235/

Out of Context information In real these are rows of a table and they will also on select keep there hover state (but it's out of context for now)

Upvotes: 1

Views: 102

Answers (6)

Ivin Raj
Ivin Raj

Reputation: 3429

I am not sure this will work, but I think it would:

<div id="row">o
    <div id="col" class="col">o o
        <div id="colChild" class="col-child">o o o Turn Me Red</div>
    </div>
</div>

Css:

#colChild:hover {
    background-color:red;
}

DEMO

Upvotes: 1

Anoop B.K
Anoop B.K

Reputation: 1478

check this

#colChild:hover{
  background-color:red
}

Upvotes: 1

Lokesh Waran
Lokesh Waran

Reputation: 113

You can use css selectors property to apply the effects to any partiticular div. A list of the CSS selectors has been given in the link below.. http://www.w3schools.com/cssref/css_selectors.asp

Upvotes: 0

Eric So
Eric So

Reputation: 465

http://jsfiddle.net/33mhdju6/

#row {
  width: 300px;
  height:100px;
  border: 3px solid red;
}
#row:hover #colChild{
  background-color:red
}

#row:hover {
  background-color:pink
}

#col{
  padding:5px;
  border: 2px solid blue;
}
  #colChild {
  padding:5px;
  border: 2px solid black;
}

Upvotes: 3

akash
akash

Reputation: 2157

Try this

   #row:hover #colChild  {
        color:red;
    }

demo

Upvotes: 1

Joy Biswas
Joy Biswas

Reputation: 6527

Use this on hover parent #row:hover > .col > .col-child{background:red;}

Upvotes: 3

Related Questions