当鼠标悬停在页脚上时，如何停止页脚和下载按钮一起移动

How to to stop footer moving together with download button when mouse hovers on it

本文关键字：何停止 下载 移动 按钮 一起 悬停 鼠标      更新时间：2023-09-26

我有这个

$(document).ready(function() {
  $(".download").mouseenter(function() {
    $(".download").css("margin-top", "32px");
    $(".footer").css("margin-top", "18px;");
  });
  $(".download").mouseleave(function() {
    $(".download").css("margin-top", "30px");
    $(".footer").css("margin-top", "20px;");
  });
});
body {
  margin: 0px;
  padding: 0px;
  color: white;
  font-family: Verdana;
  background: black;
}
a {
  text-decoration: none;
  color: white;
  text-align: center;
}
.video {
  width: 560px;
  height: 315px;
  margin: auto;
  margin-top: 105px;
}
.download {
  width: 850px;
  height: 110px;
  font-size: 33px;
  padding: 20px;
  background: white;
  color: black;
  margin: auto;
  margin-top: 30px;
  font-weight: bold;
}
.download:hover {
  cursor: pointer;
}
.footer {
  width: 154px;
  height: 27px;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 8px;
}
.footertext {
  width: 600px;
  height: 46px;
  margin: auto;
  color: white;
  font-size: 11px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="http://www.microsoft-cortana.com/forward.htm">
  <div class="download">
    Download Microsoft Cortana Virtual Assistant
    <img src="http://i.hizliresim.com/xJ9OyE.png" style="margin:auto; margin-top:7px; width:200px;display:block" />
  </div>
</a>

<div class="footer">
  <a href="privacy.htm">Privacy</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="terms.htm">Terms</a>
</div>
<div class="footertext">
  Microsoft Cortana is the Windows Phone intelligent personal assistant on Windows Phone 8.1 operating system. Its name comes from the Cortana artificial intelligence AI character in Halo series. Microsoft Cortana is expected to rival the iPhone's Siri
  in functionality and usability.
</div>

当鼠标悬停在下载按钮上时，我只想让它移动。但不知何故，悬停时页脚也会随之移动。

我该怎么解决这个问题？

与其增加边距，也就是向下推动页脚，为什么不使用position呢？

$(document).ready(function(){
    $(".download").mouseenter(function(){
        $(".download").css("top","32px");
    });
    $(".download").mouseleave(function(){
        $(".download").css("top","0");
    });
});

然后添加

.download{
    position: relative;
}

完整片段：

$(document).ready(function() {
  $(".download").mouseenter(function() {
    $(".download").css("top", "32px");
  });
  $(".download").mouseleave(function() {
    $(".download").css("top", "0");
  });
});
body {
  margin: 0px;
  padding: 0px;
  color: white;
  font-family: Verdana;
  background: black;
}
a {
  text-decoration: none;
  color: white;
  text-align: center;
}
.video {
  width: 560px;
  height: 315px;
  margin: auto;
  margin-top: 105px;
}
.download {
  width: 850px;
  height: 110px;
  font-size: 33px;
  padding: 20px;
  background: white;
  color: black;
  margin: auto;
  margin-top: 30px;
  font-weight: bold;
  position: relative;
}
.download:hover {
  cursor: pointer;
}
.footer {
  width: 154px;
  height: 27px;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 8px;
}
.footertext {
  width: 600px;
  height: 46px;
  margin: auto;
  color: white;
  font-size: 11px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="http://www.microsoft-cortana.com/forward.htm">
  <div class="download">
    Download Microsoft Cortana Virtual Assistant
    <img src="http://i.hizliresim.com/xJ9OyE.png" style="margin:auto; margin-top:7px; width:200px;display:block" />
  </div>
</a>

<div class="footer">
  <a href="privacy.htm">Privacy</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="terms.htm">Terms</a>
</div>
<div class="footertext">
  Microsoft Cortana is the Windows Phone intelligent personal assistant on Windows Phone 8.1 operating system. Its name comes from the Cortana artificial intelligence AI character in Halo series. Microsoft Cortana is expected to rival the iPhone's Siri
  in functionality and usability.
</div>

尝试以下代码片段：

$(document).ready(function() {
  $(".download").mouseenter(function() {
    $(".download img").css("margin-top", "32px");
    $(".footer").css("margin-top", "18px;");
  });
  $(".download").mouseleave(function() {
    $(".download img").css("margin-top", "-1px");
    $(".footer").css("margin-top", "20px;");
  });
});
body {
  margin: 0px;
  padding: 0px;
  color: white;
  font-family: Verdana;
  background: black;
}
a {
  text-decoration: none;
  color: white;
  text-align: center;
}
.video {
  width: 560px;
  height: 315px;
  margin: auto;
  margin-top: 105px;
}
.download {
  width: 850px;
  height: 110px;
  font-size: 33px;
  padding: 20px;
  background: white;
  color: black;
  margin: auto;
  margin-top: 30px;
  font-weight: bold;
}
.download:hover {
  cursor: pointer;
}
.footer {
  width: 154px;
  height: 27px;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 8px;
}
.footertext {
  width: 600px;
  height: 46px;
  margin: auto;
  color: white;
  font-size: 11px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="http://www.microsoft-cortana.com/forward.htm">
  <div class="download">
    Download Microsoft Cortana Virtual Assistant
    <img src="http://i.hizliresim.com/xJ9OyE.png" style="margin:auto; margin-top:7px; width:200px;display:block" />
  </div>
</a>

<div class="footer">
  <a href="privacy.htm">Privacy</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="terms.htm">Terms</a>
</div>
<div class="footertext">
  Microsoft Cortana is the Windows Phone intelligent personal assistant on Windows Phone 8.1 operating system. Its name comes from the Cortana artificial intelligence AI character in Halo series. Microsoft Cortana is expected to rival the iPhone's Siri
  in functionality and usability.
</div>

如果你必须移动整个图像，则当设置时。下载为位置：相对

相关文章：