# Make elements transparent when mouse out of them

**URL:** <https://forum.inductiveautomation.com/t/make-elements-transparent-when-mouse-out-of-them/112761>\
**Category:** Ignition\
**Tags:** perspective, ignition81\
**Created:** [December 11, 2025, 3:54pm UTC](https://forum.inductiveautomation.com/t/make-elements-transparent-when-mouse-out-of-them/112761 "2025-12-11T15:54:58Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![danielps1818](https://avatars.discourse-cdn.com/v4/letter/d/ecae2f/32.png) [@danielps1818](https://forum.inductiveautomation.com/u/danielps1818)\
**Post date:** [December 11, 2025, 3:54pm UTC](https://forum.inductiveautomation.com/t/make-elements-transparent-when-mouse-out-of-them/112761/1 "2025-12-11T15:54:58Z")

</div>

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:

```python
onMouseEnter:
	self.props.style.opacity = 1

```

```python
onMouseLeave:
	self.props.style.opacity = 0.25

```

But the buttons for some reason blink (?).

Any idea?  
Thx!

---

<div class="post-metadata">

**Author:** ![code\_skin](https://avatars.discourse-cdn.com/v4/letter/c/43a26b/32.png) [@code\_skin](https://forum.inductiveautomation.com/u/code_skin)\
**Post date:** [December 11, 2025, 3:57pm UTC](https://forum.inductiveautomation.com/t/make-elements-transparent-when-mouse-out-of-them/112761/2 "2025-12-11T15:57:36Z")

</div>

~~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?

---

<div class="post-metadata">

**Author:** ![danielps1818](https://avatars.discourse-cdn.com/v4/letter/d/ecae2f/32.png) [@danielps1818](https://forum.inductiveautomation.com/u/danielps1818)\
**Post date:** [December 11, 2025, 4:08pm UTC](https://forum.inductiveautomation.com/t/make-elements-transparent-when-mouse-out-of-them/112761/3 "2025-12-11T16:08:40Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![Ryan\_Deardorff](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan_deardorff/32/63815_2.png) [@Ryan\_Deardorff](https://forum.inductiveautomation.com/u/Ryan_Deardorff)\
**Post date:** [December 11, 2025, 4:23pm UTC](https://forum.inductiveautomation.com/t/make-elements-transparent-when-mouse-out-of-them/112761/4 "2025-12-11T16:23:53Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/1/21f1f66edaae0582b5336dd171e9909205d7d24d.png)

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [December 12, 2025, 4:08pm UTC](https://forum.inductiveautomation.com/t/make-elements-transparent-when-mouse-out-of-them/112761/5 "2025-12-12T16:08:35Z")

</div>

> [@danielps1818](#):
>
> and now works correctly

(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.

---

<div class="post-metadata">

**Author:** ![danielps1818](https://avatars.discourse-cdn.com/v4/letter/d/ecae2f/32.png) [@danielps1818](https://forum.inductiveautomation.com/u/danielps1818)\
**Post date:** [December 15, 2025, 9:12am UTC](https://forum.inductiveautomation.com/t/make-elements-transparent-when-mouse-out-of-them/112761/6 "2025-12-15T09:12:54Z")

</div>

I did!

Now is also cleaner ^^

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

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

```