如何在悬停时增加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

我只是尝试将您的CSS添加到demo page at GWT Showcase并且它有效。这是我使用的选择器：.gwt-MenuBar .gwt-MenuItem:hover我认为你只是使用了错误的选择器？

Answer 2

你试过这个吗？

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

有关详细信息，请查看css style rules of MenuBar。或者查看standard style of GWT widgets。