How do I add an animation to another element when another div class is hovered?

user_2626540 0
Viewed 118

For example, if I have an element that is not wrapped within the same parent container as another div I am hovering, will it be possible to change this external element style?

<div class="externalElement"></div>


    <container>
    
    <div class="tohover"></div> </container>

How can I update

"externalElement" when I hover "tohover" div class? I've tried with jQuery but to no avail..

css html jquery javascript
3 Answers

Here is a vanilla JavaScript answer.

Hover on the blue box to make the red box green.

onmouseover on MDN:

The onmouseover property of the GlobalEventHandlers mixin is an event handler that processes mouseover events.

The mouseover event fires when the user moves the mouse over a particular element.

onmouseout on MDN:

The onmouseout property of the GlobalEventHandlers mixin is an event handler that processes mouseout events.

The mouseout event fires when the mouse leaves an element. For example, when the mouse moves off of an image in the web page, the mouseout event is raised for that image element.

const $externalElement = document.querySelector('.externalElement')
const $tohover = document.querySelector('.tohover')

$tohover.onmouseover = () => {
  $externalElement.style.backgroundColor = 'lightgreen'
}

$tohover.onmouseout = () => {
  $externalElement.style.backgroundColor = 'indianred'
}
main {
  display: flex;
}

.externalElement {
  height: 100px;
  width: 100px;
  margin-left: 20px;
  background: indianred;
  border-radius: 5px;
  transition: all 200ms;
}

.tohover {
  cursor: pointer;
  height: 100px;
  width: 100px;
  background: steelblue;
  border-radius: 5px;
  color: white;
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
}
<main>

  <container>
    <div class="tohover">Hover me!</div>
  </container>

  <div class="externalElement"></div>

</main>

user_128608950

By using the mouseover and mouseout functionalities, you can achieve this as below;

$('.tohover').on('mouseover', function() {
  $('.externalElement').addClass('hovered')
})

$('.tohover').on('mouseout', function() {
  $('.externalElement').removeClass('hovered')
})
.tohover {
  border: 1px solid #ddd;
  padding: 10px;
}

.externalElement {
  color: red;
  transition: all 0.3s ease;
}

.externalElement.hovered {
  color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="externalElement">Here</div>


<div>
  <div class="tohover">Hover me!</div>
</div>

I used the mouseover and mouseout so that it will be easy to understand. Otherwise,it can be achieved using a single function.

user_33153330

So there are 2 different options the first is to use the sibling selector and just go pretty specific, what I wouldn't recommend because of selector sepcifity. The second option would be using jQuery as shown in the exmaple below.

The hover function accepts 2 parameters, one is what will happen on enter, the other is what happens on leave.

I also added a solution without jquery and plain js.

$('.hover').hover(
  () => $('.far').addClass('hovered'), 
  () => $('.far').removeClass('hovered')
)


const target = document.querySelector('.far-nonjquery');
const hover = document.querySelector('.hover')
hover.addEventListener('mouseenter', e => target.classList.add('hovered'));
hover.addEventListener('mouseleave', e => target.classList.remove('hovered'));
.hover:hover + .next {
  font-size: 2rem;
}

.hovered {
  color: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hover">Hover</div>
<div class="next">Next</div>


<div>
  <div>
    <p>
      <span class="far">Far away</span>
    </p>
  </div>
</div>


<div>
  <div>
    <p>
      <span class="far-nonjquery">Far away non jquery</span>
    </p>
  </div>
</div>

user_88653370
Related