Web style and mouseexit

I have what seemed to be a simple problem to solve, after some time I am at a loss on how to solve it.

The problem is simple, i want to define a custom control which will be a on screen menu object. It consist of 3 components, two labels and one background rectangle. What I need is that if the cursor is moved into the control the back colour of the rectangle changes to indicate you are on a menu item (its behind both labels as the menu button has a large and small text component)

I have tried using mouse enter to change rectangle colour, works fine, but for the life of me I can not find a way to change it back to the background colour when the mouse leaves the object. I have tried mouse exit , lost focus on the labels, the rectangle and the control and have not found anything that will actually remove the highlight.

Anyone have any idea on how to solve this simple problem, am i missing something?, I can confirm that mouseexit does fire, but ignores the label1.style=unhighlighted lines.

All of this can be done within the style itself.

You should make the design you want for “mouseenter” in the Hover section.

There is no need for the massive overhead involved with using the MouseEnter event.

You said you were trying to change the backcolor of the rectangle, not your labels. This really can be done quite simply with CSS. I’m not sure what your Xojo implementation looks like, but this is a very basic function of HTML/CSS and web browsers.

Can you post an example project with your menu setup so I can take a look and offer suggestions?

You need to keep in mind that anything you do between Xojo code and the browser will have the round trip. MouseExit events and changing styles will have that delay, and can cause massive issues on the user’s end if you use too many of these things. Much the same reason you don’t implement a splitter in Xojo Web.

Styles however utilize CSS in the browser, the Hover section is already in the browser and doesn’t need to be sent, or handled through the server when the mouse hovers.

Having two styles is the perfect example of what you’re doing wrong. You should have a single style object for “MenuStyling” or something. The “Normal” style should be the non-hover styling, the “Hover” style should be the mouse over styling. Your menu rectangle should be set to the MenuStyling style. CSS and the browser will handle the rest automatically.

Start there. Create a style that handles the non-hover and hover styling, and apply it to one of your rectangles. Remove all the Mouse events. If you get stuck after that, report back with what’s happening.

Edit: This is assuming the labels are on top of the rectangles.
Edit2: Changed wording to try and highlight the difference between changing styles, and how a style handles :hover itself.

Hmm, I guess I can imagine why that might not work on a HTML/CSS level.
What about setting the background color in the Style and applying the Style to the label? This would be removing the rectangles altogether. Does this create the desired effect?

A sample project would go a long way to helping us see what the problem is.

Are you using two labels in one “menu item” because they have different styling or are you using them for the sake of the line break?

If you’re running Dropbox you can right-click it the file and select “Copy Sharing Link”

I’ve been using Dropbox too long and I no longer remember which are the best web-upload file sending services. It is possible to use Dropbox without having the app installed, you can drag+drop the file into the web interface to upload. If you don’t have Dropbox yet and this seems like a service you may be interested in, here’s a quick handy referral link

The amount of work you’ve put into making this with Xojo is just wild. Custom interfaces in Xojo web usually just aren’t worth it. By the time you crank out the proper HTML / CSS / JS you might as well write the whole app by hand. I would recommend you stick to the Xojo controls with Xojo web unless you can write HTML / CSS / JS.

Here’s the project with a custom web control that does what your container / canvas setup does:
https://www.dropbox.com/s/nnxuustiptzquqs/menutest.xojo_binary_project?dl=1

I didn’t see any flicker with Firefox in the original implementation, so maybe I’m misunderstanding your problem. You set the color of the button (and any text styling) with a webstyle. The color of the text is hardcoded in to the control because WebStyle doesn’t offer us the flexibility of having two different text colors for two different lines.

I hope it helps, if there’s more to it you’ll have to let me know.