css - 如何在悬停时增加 gwt menuitem

Question

所以我有一个 gwt 菜单栏，当我将鼠标悬停在一个项目上时，我希望它增长。问题是当我使用css修改悬停项的高度时，所有的菜单项都得到了效果。因此，当我将鼠标悬停在一个菜单项上时，所有菜单项都会增长。有没有人能够使用 css 在菜单栏上设置动画或过渡？

这是我的CSS：

.menuBar .gwt-MenuItem:hover {
 height: 30px;
 transition: height 1s;
-moz-transition: height 1s;/*  Firefox 4 */
-webkit-transition: height 1s; /* Safari and Chrome */
-o-transition: height 1s; /* Opera  */
}

这是我想要完成的，当我的鼠标悬停在菜单项上时，会改变大小，如下图所示：

Answer 1

你试过这个吗？

.gwt-MenuBar-vertical .gwt-MenuItem:hover {
    /* properties applying to the vertical menu bar's menu items */
}

有关更多信息，您可以查看MenuBar 的 css 样式规则。或者查看GWT 小部件的标准样式。

Answer 2

我刚刚尝试将您的 CSS 添加到GWT Showcase 的演示页面中，并且成功了。这是我使用的选择器：.gwt-MenuBar .gwt-MenuItem:hover我认为您只是使用了错误的选择器？