jQuery Hover 事件同时影响两个不同的 Div（非嵌套）答案

【问题标题】：jQuery Hover Event Affecting Two Different Div's At The Same Time (not nested)jQuery Hover 事件同时影响两个不同的 Div（非嵌套）
【发布时间】：2017-02-02 21:28:11
【问题描述】：

我正在尝试编写一个 jQuery 函数，它将在整个元素周围显示一个 1px 纯红色边框，而不仅仅是每个单独的 div（它们不是嵌套的，否则我可以使用 CSS 来实现） - 查看图片。

Image 1 Image 2

当用户将鼠标悬停在其中的任何位置时，我希望 1px 纯红色边框围绕灰色标题部分以及图像同时出现的元素主体。

现在，如果我将顶部类称为“div1”，底部类称为“div2”，这就是我目前所拥有的：

$(document).ready(function() {
   $('div1').hover('border', '1px solid red');
});

这是我使用 jQuery 的第一天，所以我可能会完全离开。我只需要为一个项目完成此操作。

另外，如果毕竟有任何方法可以使用 css 完成此操作（我不知道），我更喜欢该解决方案。

感谢您能给我的任何帮助！

编辑：这段代码来自下面的人，但它本质上是我需要的：

$(document).ready(function() {
$('.div1').hover(function() {
 $(this).css('border', '1px solid red');
 },function() {
 $(this).css('border', '0');
 });

});

除了，我不希望这种情况只发生在“div1”上，同时也发生在“div2”上。它是如何添加到这段代码中的？

【问题讨论】：

你能提供你的 HTML 吗？
这一切都在一个复杂的 WordPress 主题中。我没有现成的 html
模板输出的 HTML 怎么样？
你能发布更多的 HTML 吗？这将有助于查看每个 div 何时结束。

标签： javascript jquery html css hover

【解决方案1】：

div1，除非它是自定义元素，否则应改为引用类或 ID。 $.hover() 需要一个函数来在您将鼠标悬停在（以及可选地，取消悬停）一个元素上时运行。那你想用$.css()来指定边框的变化。

$(document).ready(function() {
   $('.div1').hover(function() {
     $(this).css('border', '1px solid red');
   },function() {
     $(this).css('border', '0');
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1">div1</div>

不过，更好的方法是在悬停时分配一个类。

    $(document).ready(function() {
       $('.div1').hover(function() {
         $(this).addClass('border');
       },function() {
         $(this).removeClass('border');
       });
    });

.border {
  border: 1px solid red;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1">div1</div>

一个更好的方法就是使用 CSS，虽然只是在这里包含了很好的衡量标准，不一定是你问题的答案。

.div1:hover {
  border: 1px solid red;
  }

&lt;div class="div1"&gt;div1&lt;/div&gt;

【讨论】：

感谢您提供此代码，它非常接近。我现在唯一遇到的问题是 div1 和 div2 都必须受到影响，无论用户将鼠标悬停在 div1 还是 div2 上（事件必须同时发生）
@bay_bay 没问题。我需要查看您的代码复制该行为。

【解决方案2】：

您可以使用:hover css 伪选择器

.div1:hover {
   border : 1px solid red;
}

【讨论】：

【解决方案3】：

有什么理由不能完全在 HTML 和 CSS 中完成吗？当用户将鼠标悬停在父元素上时，将应用红色边框。像这样：

body {
  font-family: Arial, Helvetica, sans-serif;
}

.main {
  height: 300px;
  width: 300px;
  border-radius: 5px;
  border-color: black;
  border-width: 1px;
  border-style: solid;
}

.main:hover {
  border-color: red;
}

.header {
  background-color: gray;
  width: 100%;
  height: 30%;
  text-align: center;
}

.content {
  background-color: white;
  width: 100%;
}

<html>

    <body>
        <div class="main">
            <div class="header">Round Stickers</div>
            <div class"content"></div>
        </div>
    </body>

</html>

【讨论】：

会的，如果这些 div 像你的一样嵌套。不幸的是，他们不是。这就是为什么我认为我可能需要 jQuery