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

Question

我试图让div通过将鼠标悬停在其上来改变其宽度。我已经怀疑了，但我也希望通过悬停一个独立的h5标签来改变它的宽度。有没有人有任何想法如何做到这一点？这就是我现在所拥有的。

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

https://jsfiddle.net/m0u8braj/5/ ......或者http://www.cosmosdesign.co.nz/。此外，您可能会注意到盒子可能会有点痉挛，并且可以多次展开和缩回，这是否与我当前的代码有关？感谢。

Answer 1

我已编辑了您的Fiddle。它现在只用CSS做你想要的。不需要jQuery的.animate()

它的工作原理是这样的，因为CSS的:hover会影响带有+或~选择器的兄弟元素，如下所示：

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

希望这有帮助