# How to make a glow when hovering over an object?

**URL:** <https://phaser.discourse.group/t/how-to-make-a-glow-when-hovering-over-an-object/14763>\
**Category:** Phaser 3\
**Created:** [September 16, 2024, 3:43am UTC](https://phaser.discourse.group/t/how-to-make-a-glow-when-hovering-over-an-object/14763 "2024-09-16T03:43:12Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Lex](https://avatars.discourse-cdn.com/v4/letter/l/c68b51/32.png) [@Lex](https://phaser.discourse.group/u/Lex)\
**Post date:** [September 16, 2024, 3:43am UTC](https://phaser.discourse.group/t/how-to-make-a-glow-when-hovering-over-an-object/14763/1 "2024-09-16T03:43:12Z")

</div>

I need a red highlight to appear when the mouse is hovered over an object, and the highlight to disappear when the mouse is removed.Example below:  
 ![glow](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/f/fa2302f4ecf7ef97180c30826d9b8e4164c93353.gif)

How to do this, here is the code?

```javascript
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Glow</title>

  
  
</head>

<body>
<script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>
  
      <script>
var config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  backgroundColor: '#2d2d2d',
  parent: 'phaser-example',
  scene: {
    preload: preload,
    create: create 
  } };

var game = new Phaser.Game(config);
var tween = null;
var tweenAlive = false;

function preload()
{
   this.load.baseURL = './assets/';
   this.load.image('meteorit', 'sprites/meteorit.png');
}

function create()
{
      var sprite = this.add.sprite(300, 300, 'meteorit');
     
    sprite.setInteractive();
    sprite.on('pointerover', ()=>{
          console.log("glow");
     })
     sprite.on('pointerout', ()=>{
          console.log("delete glow");
     })
     
}
</script>
</body>
</html>

```

---

<div class="post-metadata">

**Author:** ![scottwestover](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/scottwestover/32/7442_2.png) [@scottwestover](https://phaser.discourse.group/u/scottwestover)\
**Post date:** [September 16, 2024, 1:46pm UTC](https://phaser.discourse.group/t/how-to-make-a-glow-when-hovering-over-an-object/14763/2 "2024-09-16T13:46:43Z")

</div>

For the game you are working on, are you targeting a specific version of Phaser, and do you have any constraints on the game type (Canvas vs WebGL)? I know in the example code you shared, it shows Phaser `3.55.2`, but if you are update to at least `3.60.0`, there were some really nice built in Glow effects added to the framework.

Example: [Phaser 3](https://labs.phaser.io/view.html?src=src/fx%5Cglow%5Cglow%20fx.js)

One thing to note, is that the FX components that were added only work in WebGL.

---

<div class="post-metadata">

**Author:** ![Lex](https://avatars.discourse-cdn.com/v4/letter/l/c68b51/32.png) [@Lex](https://phaser.discourse.group/u/Lex)\
**Post date:** [September 17, 2024, 5:56am UTC](https://phaser.discourse.group/t/how-to-make-a-glow-when-hovering-over-an-object/14763/3 "2024-09-17T05:56:14Z")

</div>

I found the page [Phaser.FX.Glow - Phaser 3 API Documentation](https://newdocs.phaser.io/docs/3.70.0/Phaser.FX.Glow), but couldn’t figure it out.Can I see an example?

---

<div class="post-metadata">

**Author:** ![scottwestover](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/scottwestover/32/7442_2.png) [@scottwestover](https://phaser.discourse.group/u/scottwestover)\
**Post date:** [September 17, 2024, 1:29pm UTC](https://phaser.discourse.group/t/how-to-make-a-glow-when-hovering-over-an-object/14763/4 "2024-09-17T13:29:17Z")

</div>

[https://labs.phaser.io/edit.html?src=src/fx\glow\glow%20fx.js](https://labs.phaser.io/edit.html?src=src/fx%5Cglow%5Cglow%20fx.js)

---

<div class="post-metadata">

**Author:** ![Phantonaut](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/phantonaut/32/7957_2.png) [@Phantonaut](https://phaser.discourse.group/u/Phantonaut)\
**Post date:** [September 19, 2024, 5:54pm UTC](https://phaser.discourse.group/t/how-to-make-a-glow-when-hovering-over-an-object/14763/5 "2024-09-19T17:54:22Z")

</div>

Rex Rainbow extension has a few ways of doing this as well:  
[https://rexrainbow.github.io/phaser3-rex-notes/docs/site/shader-glowfilter2/](https://rexrainbow.github.io/phaser3-rex-notes/docs/site/shader-glowfilter2/)  
[https://rexrainbow.github.io/phaser3-rex-notes/docs/site/shader-outline/](https://rexrainbow.github.io/phaser3-rex-notes/docs/site/shader-outline/)