如何在悬停时增加 gwt menuitem

Posted 2023-02-16

【中文标题】如何在悬停时增加 gwt menuitem

【英文标题】：How to grow gwt menuitem on hover

【发布时间】：2013-10-03 17:44:38

【问题描述】：

所以我有一个 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  */

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

【参考方案1】：

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

【讨论】：

它只是让悬停的项目增长而不是其他项目？

我只是尝试使用相同的示例，它正在调整所有菜单项的大小，而不是一个 @Churro

抱歉，您是要设置菜单栏项的样式，还是子菜单项的样式？

你说得对，它不适用于主菜单项。它适用于子菜单项。问题是这些项目是表格的一部分。如果他们是<div>s，他们会单独弹出。 I'm guessing you're trying to accomplish something like this?可能有一些 CSS 属性的组合可以让你这样做，但抱歉，我不知道。

【参考方案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。