You don't need mouse-over listeners to trigger hover-effects, you can
also use css pseudo-classes:
(see http://www.w3schools.com/CSS/css_pseudo_classes.asp )
.basis-menubutton
{
border: 1px solid transparent;
cursor: pointer;
background-color: transparent;
text-align: center;
vertical-align: middle;
padding: 0px;
overflow: hidden;
}
.basis-menubutton-border
{
border: 1px solid #cbcbcb;
}
.basis-menubutton-down:HOVER
{
border: 1px solid #909090;
background-color: #cacaca;
}
.basis-menubutton-up:HOVER
{
border: 1px solid #cbcbcb;
background-color: #e8e8e8;
}
On Sep 4, 10:33 pm, Jim Douglas <[email protected]> wrote:
> I've got a set of button rules to change the background color on
> rollover (CSS below, but it's nothing exotic). It works if you just
> move the mouse in and out of the button; the CustomButton code to
> toggle setHovering(boolean) is triggered, and everything is good.
>
> But if something happens to suppress the ON_MOUSE_OUT event,
> setHovering(false) is never invoked, so the button retains the
> rollover background color until you explicitly trigger ON_MOUSE_OUT by
> dragging the mouse in and out of the button. This situation can
> easily happen when clicking the button invokes a modal dialogue
> window, or when the button is at the edge of a window.
>
> This seems like a GWT bug, although possibly caused by inherent
> browser limitations. I'd expect setHovering(false) to be invoked when
> the mouse is no longer hovering over the button, as opposed to just
> the subset of cases where the user drags the mouse out of the button,
> triggering the ON_MOUSE_OUT event.
>
> Does anyone know of any workarounds?
>
> .basis-menubutton
> {
> border: 1px solid transparent;
> cursor: pointer;
> background-color: transparent;
> text-align: center;
> vertical-align: middle;
> padding: 0px;
> overflow: hidden;}
>
> .basis-menubutton-border
> {
> border: 1px solid #cbcbcb;}
>
> .basis-menubutton-down-hovering
> {
> border: 1px solid #909090;
> background-color: #cacaca;}
>
> .basis-menubutton-up-hovering
> {
> border: 1px solid #cbcbcb;
> background-color: #e8e8e8;
>
> }
>
> // From CustomButton:
>
> case Event.ONMOUSEOUT:
> Element to = DOM.eventGetToElement(event);
> if (DOM.isOrHasChild(getElement(), DOM.eventGetTarget(event))
> && (to == null || !DOM.isOrHasChild(getElement(), to))) {
> if (isCapturing) {
> onClickCancel();
> }
> setHovering(false);
> }
> break;
> case Event.ONMOUSEOVER:
> if (DOM.isOrHasChild(getElement(), DOM.eventGetTarget(event)))
> {
> setHovering(true);
> if (isCapturing) {
> onClickStart();
> }
> }
> break;
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Google Web Toolkit" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en
-~----------~----~----~----~------~----~------~--~---
