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.

CodePudding user response：

You can do everything with mouseenter and mouseleave events which you will set on large bubble divs.

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.

1. Add mouseenter and mouseleave event listeners to the large bubble

2. On mouseenter, do something like document.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 remove display: none.

3. On mouseleave, reset everything to initial state.

CodePudding user response：

There are many approaches,This is quite easy way. In this approach,you don't need JavaScript Dom manipulation to do this.

In order to do this, You need to have this kind of elements,

<div >
<div ></div>
</div>

<div ></div>

The Wrapper acts as parent for business bubble and other Bubbles.So you can design your business rules bubble inside the bussiness_rules bubble div.(I didn't designed it for simplicity of the code).Then your requirement is when hovering the business bubble,your other bubbles should display. so in the css file defined below rules,

.other_bubbles{
   display:none;
 }
 .wrapper:hover ~ .other_bubbles {
  display:block;
 }

So that when you hovered the wrapper, your other bubbles will be displayed. In order to do that your other bubble should set it to display none at the beginning.