1

The goal is to affect the Parent div box using :hover via child div box.

This is what I've Done and it doesn't work. HTML:

<body>
<div id=Parent-box>
<div id=Child-box></div>
</div>
</body>

CSS:

#Parent-box{
width: 750px;
height: 400px;
margin-left: auto;
margin-right: auto;
margin-top: 25px;
border: 1px solid #000;
position: relative;
}
 
#Child-box{
z-index: 1;
width: 700px;
height: 350px;
margin-left: 25px;
margin-top: 25px;
position: absolute;
background: #339;
border: 1px solid #000;
transition: all 200ms linear;
}
 
#Child-box:hover{
height: 600px;
transition: all 200ms linear;
}
 
#Child-box:hover + #Parent-box{
height: 650px;
transition: all 100ms linear;
}

does anyone know if this is possible?

thanks :)

5
  • 2
    Not with CSS, there are no parent selectors. You'll need to use JavaScript to do it. Aug 24, 2014 at 6:51
  • on hpver over the child, what should happen to the parent ?
    – Ajey
    Aug 24, 2014 at 6:56
  • this link will help you to understand ..stackoverflow.com/questions/1014861/… Aug 24, 2014 at 6:56
  • tell me what do you expect as the output on over ?
    – Ajey
    Aug 24, 2014 at 6:58
  • Ajey.. the parent's height should be increased also... when i hover the child
    – Anonymous
    Aug 24, 2014 at 6:58

5 Answers 5

5

PURE CSS - DEMO (Without JavaScript or jQuery)

But you must use position: relative; for your Child-box div.

HTML

<div id=Parent-box>
<div id=Child-box></div>
</div>

CSS

#Parent-box{
width: 750px;
height: auto;
margin-left: auto;
margin-right: auto;
margin-top: 25px;
border: 1px solid #000;
position: relative;
}

#Child-box{
z-index: 1;
width: 700px;
height: 350px;
margin-left: 25px;
margin-top: 25px;
margin-bottom: 25px;
position: relative;
background: #339;
border: 1px solid #000;
transition: all 200ms linear;
}

#Child-box:hover{
padding: 125px 0px;
transition: all 200ms linear;
}
0
0

you can acheive it by using jquery since, you cannot select a parent div using CSS Here is the Demo

$('#Child-box').hover(

function () {
    $('#Parent-box').css({
        'height': '800px'
    });
}, function () {
     $('#Parent-box').css({
        'height': '400px'
    })  ;
});

Not perfect, but you get the idea right ?

1
  • but Ajey.. how can i add some transition with jquery? I'm sorry because I'am not very familiar with transition using jquery.. If you mind.. can you teach?.. thanks
    – Anonymous
    Aug 24, 2014 at 7:36
0

Actually, there is no CSS selector for selecting a parent of a child. But, there are many ways to do the same in jquery. Here's the code:

$('#Child-box').mouseenter(function(){
   $(this).parent('#Parent-box').css('height','700px');
});


$('#Child-box').mouseleave(function(){
   $(this).parent('#Parent-box').css('height','600px');
});
0
0

It's only possible to trigger the hover event on the parent element in your case!

You can do this:

#Parent-box {
    width: 750px;
    height: 400px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;
    border: 1px solid #000;
    position: relative;
}
#Child-box {
    z-index: 1;
    width: 700px;
    height: 350px;
    margin-left: 25px;
    margin-top: 25px;
    position: absolute;
    background: #339;
    border: 1px solid #000;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
#Parent-box:hover  {
    height: 650px;
    -moz-transition: all 100ms linear;
    -o-transition: all 100ms linear;
    -webkit-transition: all 100ms linear;
    transition: all 100ms linear;
}

#Parent-box:hover #Child-box {
    height: 600px;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}

If you want to have a syncron hover effect then change the transitions time. I also added the vendor specific properties.

Here's DEMO

0

well, the main problem is you have defined the height:400px on parent element and this is the real problem. In your scenario you can achieve it with pure CSS; also there are much advanced options when using jquery. Check DEMO.

CSS Code

#Parent_box{height: 400px; /*Remove height.*/}

JS Code

$(document).ready(function()
{
$("#Child_box").hover(function (){
  $(this).parent("#Parent_box").css("height", "750px;");
});
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.