Question

例如，如果我有一个元素与我悬停的另一个 div 不在同一个父容器中，是否可以更改此外部元素样式？

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


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

如何更新

“externalElement”当我将鼠标悬停在“tohover”div 类时？我试过 jQuery 但无济于事..

Answer 1

这是一个普通的 JavaScript 答案。

将鼠标悬停在蓝色框上以使红色框变为绿色。

onmouseover on MDN：

<块引用>

GlobalEventHandlers mixin 的 onmouseover 属性是处理 event handler 事件的 mouseover。

当用户将鼠标移到特定元素上时会触发 mouseover 事件。

onmouseout on MDN：

<块引用>

GlobalEventHandlers mixin 的 onmouseout 属性是一个处理 event handler 事件的 mouseout。

<块引用>

mouseout 事件在鼠标离开元素时触发。例如，当鼠标从网页中的图像移开时，会为该图像元素引发 mouseout 事件。

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>

Answer 2

通过使用 mouseover 和 mouseout 功能，您可以实现如下；

$('.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>

我使用了 mouseover 和 mouseout 以便于理解。否则，可以使用单个函数来实现。

Answer 3

所以有 2 个不同的选项，第一个是使用同级选择器并且非常具体，由于选择器的特殊性，我不推荐这样做。第二个选项是使用 jQuery，如下面的示例所示。

hover 函数接受 2 个参数，一个是进入时会发生什么，另一个是离开时发生什么。

我还添加了一个没有 jquery 和普通 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>

当另一个 div 类悬停时，如何向另一个元素添加动画？

3 个答案: