将两个单独的元素附加到一个动画脚本

Question

I'm trying to get a div to change its width through hovering over it. I've got that sussed but I would also like its width to change through hovering an h5 tag which is separate. Does anyone have any ideas how to do this? Here's what I have at the moment.

$(function(){
$("#hoverbox").hover(
    function(){
       $(this).animate({width: '150px'});
    },
    function(){
        $(this).animate({width: '38px'});
    }
);
}};

https://jsfiddle.net/m0u8braj/5/ ... alternatively it's at http://www.cosmosdesign.co.nz/ . Also you may notice the box can act a little spastic and expand and retract numerous times, does this relate to my current code? Thanks.

Answer 1

I've edited your Fiddle . It now does what you desire with CSS only. No need for jQuery's .animate()

It's working like this, because CSS's :hover can affect sibling elements with the + or ~ selectors, like so:

#hoverbox:hover, h5:hover + #hoverbox{
  width: 150px;
}

Hope this helps