Question

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

当用户在任何地方徘徊时，我希望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>

Answer 2

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

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

Answer 3

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: