时间戳

首页 > 解决方案 > 检查元素是否：悬停（javascript或jquery）

javascript - 检查元素是否：悬停（javascript或jquery）

问题描述

我有几个具有相同类名的 div。当悬停在其中一个 div 上时，我希望将特定类添加到悬停的类中，并将不同的类添加到未悬停的 div 中。

我对 CSS 感到厌烦，但它对我不起作用，因为在我的 HTML 中，并非所有 div 都具有相同的父级。

我试图为此找到解决方案，但我的 javascript/jQuery 技能不太好。真的很感激海峡向前的解决方案！

在这里查看：jsfiddle

这是我的 HTML 结构：

<div class="container">
  <div class="row">
    <div class="project">Project 1</div>
    <div class="project">Project 2</div>
  </div>
  <div class="row">
    <div class="project">Project 3</div>
    <div class="project">Project 4</div>
  </div>
</div>

这是我的 CSS：

.project {
  font-size: 32px;
  padding: 20px;
  margin: 20px;
  background-color: grey;
}

.row:hover > .project, .hover {
  color: transparent;
  transition: color 0.5s ease;
  text-shadow: 0 0 8px rgba(255,255,255,0.5);
  transition: text-shadow 0.5s ease;
} 

.row:hover > .project:hover, .not-hover {
  color: #fff !important;
  transition: color 0.5s ease;
  text-shadow: none;
  transition: text-shadow 0.5s ease;
}

标签： javascriptjquerycss

解决方案

您可以onmouseover在 div 上使用事件。使用 JQuery，您可以将特定类添加到悬停的 div 并从同级中删除该类。在这里查看：jsfiddle

    <div id='project1' class="project" onmouseover=$("#project1").addClass("classX").siblings().removeClass('classX')>Project 1</div>

推荐阅读