Make elements transparent when mouse out of them

Ignition
,
1

I have some buttons with the opacity set to 0.25

I want that if you hover the mouse the opacity is set to 1 so you can see clearly the buttons.
I tried this:

onMouseEnter:
	self.props.style.opacity = 1

onMouseLeave:
	self.props.style.opacity = 0.25

But the buttons for some reason blink (?).

Any idea?
Thx!

2

Do you have text on the button? I’m pretty sure that will trigger the onMouseLeave.

Do you have any other mouse events or bindings on your styles that are conflicting?

1 Like
3

it was overlaping another component because I was trying negative margin and that was causing it. I changed it and now works correctly.

Thx for the help!

4

Mouse events are very unreliable because the scripting doesn’t run in the browser. You should use the Style Class “hover” state:

image
image386Ă—279 14.3 KB

6 Likes
5

(let me finish your sentence)

... a reasonable amount of the time.

Take heed what Ryan mentioned. Keep graphical interactions in the client – eg through css (and JavaScript) – as much as practically possible, which includes hover events like this. They’re not only significantly faster and reliable, they don’t add unnecessary burdon on the gateway, thus increasing scalability and performance.

5 Likes
6

I did!

Now is also cleaner ^^

.psc-show_while_hover {
	opacity: 0.05;
	transition: opacity 0.25s ease;
	cursor: pointer;
}

.psc-show_while_hover:hover {
	opacity: 1.0;
}
2 Likes