# Hover trigger over seperate element

**URL:** <https://community.weweb.io/t/hover-trigger-over-seperate-element/8069>\
**Category:** How do I?\
**Created:** [April 11, 2024, 11:36am UTC](https://community.weweb.io/t/hover-trigger-over-seperate-element/8069 "2024-04-11T11:36:30Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Newtothis](https://avatars.discourse-cdn.com/v4/letter/n/7ba0ec/32.png) [@Newtothis](https://community.weweb.io/u/Newtothis)\
**Post date:** [April 11, 2024, 11:36am UTC](https://community.weweb.io/t/hover-trigger-over-seperate-element/8069/1 "2024-04-11T11:36:30Z")

</div>

Hi guys,

do you know how to trigger a hover when hovering over a separate element.

For context the icon and text are nested in a div and then both the icon and the text are in separate divs internally.

My hover currently works when hovering over the icon as you can see however, I would like it to trigger when hovering over the text.

Also for some further context there is also an active state on the div to stay in hovered state when a user clicks on it.

 ![Screenshot 2024-04-11 at 12.33.44](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/8/85ff20aff484c98b67f3979e8fc73aa70fae9407.png)  
 ![Screenshot 2024-04-11 at 12.34.00](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/4/4cbce84604b86f985aa532386fbd282dc3dca9f8.png)

---

<div class="post-metadata">

**Author:** ![jptrinh](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/jptrinh/32/1493_2.png) [@jptrinh](https://community.weweb.io/u/jptrinh)\
**Post date:** [April 11, 2024, 3:00pm UTC](https://community.weweb.io/t/hover-trigger-over-seperate-element/8069/2 "2024-04-11T15:00:02Z")

</div>

Hey @Newtothis  
Why don’t you add the hover to the parent div holding the icon and text?  
I don’t think you can have hover state on a non-nested element (but possible with custom code)