Artificial Intelligence Question posted in
ChatGBT is becoming a world-wide phenomena, try it out here.

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

I have this

$(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>

I want only the download button to move when the mouse hovers on it. But somehow the footer moves with it too on hover.

How can I fix this?

Tags:

2

Answers


  1. 0

    Try this code snippet:

    $(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>

    If you have to move Whole image then When SET .download as Position:relative

    Login or Signup to reply.
  2. 0

    Rather than adding margin, which is pushing the footer down, why not just use position?

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

    Then add

    .download{
    position: relative;
}

    Full snippet:

    $(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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search