javascript - 当我将鼠标悬停在字母上时，如何使字母停止移动？

问题描述

当我将鼠标悬停在数字上时会发生什么：

https://gyazo.com/20b6426d435551c5ee238241d3f96b4d

基本上，当我将鼠标悬停在分页数字上时，它们会向右移动，我不知道我在代码中做错了什么让他们这样做。在帖子的最底部，我将添加一个基本上只是分页但没有这个问题的 HTML。

编码：

<!-- Scripts -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
      // Collapsible
            var coll = document.getElementsByClassName("collapsible");
            var i;

            for (i = 0; i < coll.length; i++) {
                coll[i].addEventListener("click", function() {
                    this.classList.toggle("active");
                    var content = this.nextElementSibling;
                    if (content.style.maxHeight){
                        content.style.maxHeight = null;
                    } else {
                        content.style.maxHeight = content.scrollHeight + "px";
                    }
                });
            }
        </script>
    <script>
      // Pagination
      pageSize = 20;

      var pageCount =  $(".line-content").length / pageSize;

         for(var i = 0 ; i<pageCount;i++){

           $("#pagin").append('<li><a href="#">'+(i+1)+'</a></li> ');
         }
            $("#pagin li").first().find("a").addClass("current")
        showPage = function(page) {
          $(".line-content").hide();
          $(".line-content").each(function(n) {
              if (n >= pageSize * (page - 1) && n < pageSize * page)
                  $(this).show();
          });
      }

      showPage(1);

      $("#pagin li a").click(function() {
          $("#pagin li a").removeClass("current");
          $(this).addClass("current");
          showPage(parseInt($(this).text()))
      });
    </script>

/* main.css */
body {
    background-color: #333;
    color: #999;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.6em;
    margin: 0;
}
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 2px #000;
    border-radius: 5px;
    background: #999999;
}
::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: #686868;
}
::-webkit-scrollbar-thumb:hover {
    background: #4a4a4a;
}
.container {
    width: 80%;
    margin: auto;
    overflow: hidden;
}
#main-header {
    background-color: #444;
    color: #fff;
}
#navbar {
    background-color: #333;
    color: #fff;
}
#navbar ul {
    padding: 0;
    list-style: none;
}
#navbar li {
    display: inline;
}
#navbar a {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    padding-right: 15px;
}
#showcase {
    background-image: url('../images/background.jpg');
    background-position: center right;
    min-height: 300px;
    margin-bottom: 30px;
    text-align: center;
}
#showcase h1 {
    color: #fff;
    font-size: 50px;
    line-height: 1.6em;
    padding-top: 30px;
}
#main {
    float: left;
    width: 70%;
    padding: 0 30px;
    box-sizing: border-box;
}
#sidebar {
    border-radius: 10px;
    float: right;
    width: 30%;
    background: #444;
    color: #999;
    padding: 0px 15px;
  padding-bottom: 15px;
    box-sizing: border-box;
}
#main-footer {
    background: #222;
    color: #fff;
    text-align: center;
    padding: 20px;
    margin-top: 40px;
}
@media(max-width:600px) {
    #main {
        width: 100%;
        float: none;
    }
    #sidebar {
        width: 100%;
        float: none;
    }
}

/* songscollapsible.css */
.current {
  color: inherit;
}
#pagin li {
  display: inline-block;
}
.collapsible {
  background-color: #444;
  color: #999;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 17px;
}
.active, .collapsible:hover {
  background-color: #555;
}
.content {
  max-height: 0;
  padding: 0px 15px 0px 15px;
  overflow: hidden;
  background-color: #666;
  color: #999;
  border-radius: 15px;
  transition: max-height 0.7s ease-out;
}
.button {
  box-shadow: 0px 2px 4px #555;
  border-radius: 15px;
}
/* .limg -> left image */
.limg {
  float: left;
  padding-right: 5px;
  max-width: 20px;
  max-height: 20px;
}
/* .fimg -> front image */
.fimg {
  float: left;
  padding-bottom: 15px;
  max-width: 20%;
}
.pl5 {
  padding-left: 5px;
}
.pl40 {
  padding-left: 40%;
}
.lh1-4 {
  line-height: 1.4;
}
.dli {
  max-width: 17px;
  max-height: 17px;
  padding-right: 5px;
}
a:link {
  text-decoration: none;
  color: #999;
}
a:visited {
  text-decoration: none;
  color: #999;
}
a:hover {
  text-decoration: none;
  color: #999;
}
a:active {
  text-decoration: none;
  color: #999;
}

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>test</title>
    <style>
      .current {
        color: inherit;
      }
      #pagin li {
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <div class="line-content">test1</div>
    <div class="line-content">test2</div>
    <div class="line-content">test3</div>
    <div class="line-content">test4</div>
    <div class="line-content">test5</div>
    <div class="line-content">test6</div>
    <ul id="pagin"></ul>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    </script>
    <script>
      // Pagination
      pageSize = 2;

      var pageCount =  $(".line-content").length / pageSize;

         for(var i = 0 ; i<pageCount;i++){

           $("#pagin").append('<li><a href="#">'+(i+1)+'</a></li> ');
         }
            $("#pagin li").first().find("a").addClass("current")
        showPage = function(page) {
          $(".line-content").hide();
          $(".line-content").each(function(n) {
              if (n >= pageSize * (page - 1) && n < pageSize * page)
                  $(this).show();
          });
      }

      showPage(1);

      $("#pagin li a").click(function() {
          $("#pagin li a").removeClass("current");
          $(this).addClass("current");
          showPage(parseInt($(this).text()))
      });
    </script>
  </body>
</html>

标签： javascripthtmljquerycss

javascript - 当我将鼠标悬停在字母上时，如何使字母停止移动？

问题描述

解决方案

推荐阅读