javascript - jQuery 悬停事件同时影响两个不同的 Div(未嵌套)

Question

我正在尝试编写一个 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”上。如何将其添加到此代码中？

Answer 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;
  }

<div class="div1">div1</div>