change child on parent hover

but also have child own hover

Page 1 of 1

3 Replies - 5117 Views - Last Post: 14 August 2013 - 12:22 PM

#1 izrafel  Icon User is offline

  • D.I.C Head

Reputation: 11
  • View blog
  • Posts: 95
  • Joined: 24-July 09

change child on parent hover

Posted 03 January 2011 - 02:40 AM

i will explain more in detail, i want to change the child when the parent is hovered, but when the child is hovered i want to change some properties as well, here is where i hit rock bottom :D. the child doesn't want to execute its own hover rules. i want to do this with only css, here is some code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
.outer{
background-color:red;
width:200px;
height:100px;
}
.outer:hover{
background-color:green;
}
.inner{
background-color:yellow;
width:50px;
height:30px;
}

.outer:hover .inner{
background-color:pink;
}
.inner:hover{
background-color:black;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>

</div>

</body>

</html>


ok now, when i hover over outer, the inner changes to pink, but when i hover over inner,it doesn't want to change to black.
I tried playing with z-index, but no luck.any ideas?

Is This A Good Question/Topic? 0
  • +

Replies To: change child on parent hover

#2 bizzehdee  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 5
  • View blog
  • Posts: 54
  • Joined: 06-April 08

Re: change child on parent hover

Posted 03 January 2011 - 07:46 AM

technically, when hovering over inner, you are still hovering over outer... so what you need to do is make sure that the inner class over rules the outer class, no matter what... simply add !important after background-color: black so you end up with
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
.outer{
background-color:red;
width:200px;
height:100px;
}
.outer:hover{
background-color:green;
}
.inner{
background-color:yellow;
width:50px;
height:30px;
}

.outer:hover .inner{
background-color:pink;
}
.inner:hover{
background-color:black !important;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>

</div>

</body>

</html>

Was This Post Helpful? 0
  • +
  • -

#3 izrafel  Icon User is offline

  • D.I.C Head

Reputation: 11
  • View blog
  • Posts: 95
  • Joined: 24-July 09

Re: change child on parent hover

Posted 03 January 2011 - 08:52 AM

:^: :oops: 10x :)
Was This Post Helpful? 0
  • +
  • -

#4 DBConner  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 14-August 13

Re: change child on parent hover

Posted 14 August 2013 - 12:22 PM

View Postizrafel, on 03 January 2011 - 02:40 AM, said:

i will explain more in detail, i want to change the child when the parent is hovered, but when the child is hovered i want to change some properties as well, here is where i hit rock bottom :D/>. the child doesn't want to execute its own hover rules. i want to do this with only css, here is some code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
.outer{
background-color:red;
width:200px;
height:100px;
}
.outer:hover{
background-color:green;
}
.inner{
background-color:yellow;
width:50px;
height:30px;
}

.outer:hover .inner{
background-color:pink;
}
.inner:hover{
background-color:black;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>

</div>

</body>

</html>


ok now, when i hover over outer, the inner changes to pink, but when i hover over inner,it doesn't want to change to black.
I tried playing with z-index, but no luck.any ideas?


It's 2013 now - but I was having the same problem. I goggled it, binged it... etc. Lots of JQuery solutions, but I write enough JQuery already. I wanted a class on nav or ul, but special hover on selected li .

The !important suggestion below doesn't work for this case. However, selector attributes do:

Here's CSS:

li[class="selectedMainMenu"]:hover
{
background: yellow ;
color:blue;
}

So now if you have something like this:

<ul class="nav88" >
<li >Houston Texas</li>
<li class="selectedMainMenu">Sherman Texas</li>
<li >Austin Texas</li>
<li class="selectedMainMenu">Park City Utah</li>
</ul>

The child hovers will work like you want.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1