Question

我有一个动画评级栏，当你将鼠标悬停在它上面时会改变宽度。

我试着写一个问题的解释，但我认为看看链接要容易得多。

基本上，当鼠标悬停在它们上方时，我很难将div作为子项的中心变化。我曾尝试同时动画父div的宽度，但没有成功。

Answer 1

刚检查过您的代码：执行此操作

#ratebar {
font-size:14px;
font-weight:bold;
margin:50px auto;
width:auto;/*change this*/
}

现在定位div将此div与其他div包装

Answer 2

Praveen Prasads方法的替代方案：

我注意到你将每个子div设置为20px的宽度，但在任何时候只有一个可以超过（26px）。您在父div上设置的宽度为210px。除第一个孩子外，每个孩子的div都有1px的边界。

所以所有子div的最大总宽度计算如下：

9 * 20 = 180 //standard div width
1 * 26 = 26  //hovered div width
9 * 1  = 9   //border
Total: 215
215 is more than 210 so the last one drops down.

所有子div的最小总宽度计算如下：

10 * 20 = 200 //standard div width
9 * 1   = 9   //border
Total: 209
209 is less than 210 so the last one stays on the same line as the rest.

解决方案：尝试将父div的宽度设置为215px或更高。这应该可以解决问题。