# Group highlight on mouse over on group title

**URL:** <https://discourse.nodered.org/t/group-highlight-on-mouse-over-on-group-title/99034>\
**Category:** Feature Requests\
**Tags:** group-highlight\
**Created:** [13 September 2025 09:06 UTC](https://discourse.nodered.org/t/group-highlight-on-mouse-over-on-group-title/99034 "2025-09-13T09:06:19Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [13 September 2025 09:06 UTC](https://discourse.nodered.org/t/group-highlight-on-mouse-over-on-group-title/99034/1 "2025-09-13T09:06:19Z")

</div>

Hi There,

I just discovered the possibility of using a transparent group borders which I really like since the grouping is only shown when needed:

![tmp5](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/b/dbcfbc2fc361aa8e7398160d3f9d194e095566c6.gif)

I see the text but no border - less clutter, clearer flow.

Now seeing this, I naturally move the mouse cursor to the group title but nothing happens. Only if I cross over the border is the group border shown.

Hence my request: show the group board when the cursor is moved over the group title.

EDIT: unfortunately this is non-trivially doable since the highlight is done using CSS [pointerEvents](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events) which - AFAIK - aren't triggerable via jQuery. The group label would need an `on('mouse{over|out}',...)` somewhere [here](https://github.com/node-red/node-red/blob/9ad329e5a184cbd749f4cacf30ae775d1205eba6/packages/node_modules/%40node-red/editor-client/src/js/ui/view.js#L5789-L5793) and that could trigger some jQuery magic ...

---

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [15 September 2025 08:35 UTC](https://discourse.nodered.org/t/group-highlight-on-mouse-over-on-group-title/99034/2 "2025-09-15T08:35:29Z")

</div>

Update: actually got this working using the CSS class `red-ui-flow-group-hovered`. All I did was add this code:

```javascript
g.append('svg:text')
    .attr("class","red-ui-flow-group-label")
    .on("mouseover", function() {
            let grpId = $(g[0]).attr('id');
            $(`#group_select_${grpId}`).addClass('red-ui-flow-group-hovered');
            d3.event.preventDefault();})
    .on("mouseout", function() {
            let grpId = $(g[0]).attr('id');
            $(`#group_select_${grpId}`).removeClass('red-ui-flow-group-hovered');
            d3.event.preventDefault();});

```

over [here](https://github.com/node-red/node-red/blob/9ad329e5a184cbd749f4cacf30ae775d1205eba6/packages/node_modules/%40node-red/editor-client/src/js/ui/view.js#L5612).

The [server-less Node-RED](https://cdn.flowhub.org/?t=0&fhid=2ab341d55fcf9126) has a demonstration of how that works.

As an aside, I noticed that clicking and holding the group title allows me to move the group. Yet doing the same _within_ the group but off the title doesn't work. So to have the group title highlight when mouse-over is consistent with being able to move a group using the title.

![tmp6](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/e/0e610a90d715737b9675646c4904e25b2ee8b28d.gif)

EDIT: added animation

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [15 September 2025 09:38 UTC](https://discourse.nodered.org/t/group-highlight-on-mouse-over-on-group-title/99034/3 "2025-09-15T09:38:40Z")

</div>

Of course you can move a group by dragging anywhere on the border, and the cursor changes to 'move' to indicate this.  
It's interesting to discover that you can move the group by dragging on the title because (on Node-red unmolested) the cursor does not change here.

I didn't try your additional code but this CSS will change the colour of the title and cursor on hover:

```auto
.red-ui-flow-group-label tspan.red-ui-flow-group-label-text:hover {
        fill:red;
        cursor: move;
}

```

I couldn't get it to change the background colour of the title bar, there does not seem to be an available div to style.

Not sure I'd want to keep the colour change on hover, but I will leave the cursor change in my editor css file.

---

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [15 September 2025 10:03 UTC](https://discourse.nodered.org/t/group-highlight-on-mouse-over-on-group-title/99034/4 "2025-09-15T10:03:38Z")

</div>

> [@jbudd](#):
>
> Of course you can move a group by dragging anywhere on the border, and the cursor changes to 'move' to indicate this.

Sure but this about the border being invisible, so there is no border to move with. But that's also not my intention here. It's experimenting with non-opaque[1] borders to see whether they can reduce clutter but still provide details on the workings of a flow (i.e. via the group title).

I honestly didn't think about moving groups because this is something for a project that has a Node-RED viewer and a Node-RED editor - two different components that are styled completely differently.

Just throwing it out there to see whether others also like it. It will probably never make it into Node-RED but that's not the point here.

[1] = is it unopaque, inopaque, non-opaque - opaque being the [opposite](https://www.merriam-webster.com/dictionary/opaque) of what I'm doing.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [15 September 2025 10:18 UTC](https://discourse.nodered.org/t/group-highlight-on-mouse-over-on-group-title/99034/5 "2025-09-15T10:18:43Z")

</div>

> [@gregorius](#):
>
> [1] = is it unopaque, inopaque, non-opaque - opaque being the [opposite](https://www.merriam-webster.com/dictionary/opaque) of what I'm doing.

Transparent?

---

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [15 September 2025 10:25 UTC](https://discourse.nodered.org/t/group-highlight-on-mouse-over-on-group-title/99034/6 "2025-09-15T10:25:38Z")

</div>

> [@Colin](#):
>
> Transparent?

Of course! Monday mornings ... 🙂

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [15 September 2025 12:24 UTC](https://discourse.nodered.org/t/group-highlight-on-mouse-over-on-group-title/99034/7 "2025-09-15T12:24:10Z")

</div>

In my view, the heading absolutely should have the same interactivity as the border of the group since you can already double-click it to open the group settings and grab it to move the group.

In fact, I would say that not changing the mouse pointer on hover is a BUG. That should be fixed. It should be treated the same as the border.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [14 November 2025 12:24 UTC](https://discourse.nodered.org/t/group-highlight-on-mouse-over-on-group-title/99034/8 "2025-11-14T12:24:12Z")

</div>

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.