时间戳

首页 > 解决方案 > 如何让我的 Jquery 鼠标向上功能工作

jquery - 如何让我的 Jquery 鼠标向上功能工作

问题描述

我试图让 div 在鼠标按下时更改样式，并且在页面上任何位置的 mouseup 上让 div 恢复到其初始状态。我的代码是否有错误。如何使用页面上任何位置的 mouseup 功能使所有 div 恢复到原始状态。我知道（这个）功能，但有（任何地方）功能。

$(".div1").mousedown(function(evt) {
  $(this).css({
    "height": "200px",
    "width": "400px",
    "background-color": "red",
    "color": "green",
    "text-align": "right",
  }).html("Lynch");
});


$(document).mouseup(function(evt) {
  $('div').css({
    "height": "100px",
    "width": "200px",
    "background-color": "green",
    "color": "red",
    "text-align": "left",
  }).html("Chris");
});
.div1 {
  background-color: green;
  height: 100px;
  width: 200px;
  color: red;
  text-align: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div1">
  <h3>
    Chris
  </h3>
</div>

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


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


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


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


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


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


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


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


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

标签： jqueryhtmlmousedownmouseup

解决方案

关于您遇到的新问题（一栏），问题来自元素。

元素有一个默认边距，这可能会影响父兄弟姐妹，这就是为什么你在页面加载时有边距。

但是鼠标上下，直接设置div的html内容，同时删除元素，导致margin消失！

推荐阅读