Issue
I'm trying to have elements appear when I'm hovering a specific one but I don't know which approach to chose. My project only contains html, css and javascript.
I want that when the user is hovering business rules (as seen on the picture), the other bubbles to lower in opacity and new bubbles to appear around the hovered one. Should I use js observer to add a class that will lower opacity on other bubbles and one that set visible the new bubbles ? My main problem being that I haven't found a way to trigger an observer on focus.
Solution
You can do everything with mouseenter
and mouseleave
events which you will set on large bubble div
s.
Initial state would be that all large bubbles have the class large-bubble
with normal opacity and small bubbles around the large one have the class small-bubble
with display: none
.
Add
mouseenter
andmouseleave
event listeners to the large bubbleOn
mouseenter
, do something likedocument.getElementsByClassName('.large-bubble')
and apply different opacity. Add a class which will unset opacity to the bubble that is currently hovered. Then get all small bubbles belonging to the large bubble and removedisplay: none
.On
mouseleave
, reset everything to initial state.
Answered By - Aid Hadzic
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.