个人中心
gpt4 book ai didi

javascript - margin 移动 :
    jitters when hover function initiated.

转载 作者：太空宇宙 更新时间：2023-11-03 22:47:40 26 4
gpt4 key购买 nike

这只是一个基于理论的问题。我对编程还很陌生，想知道为什么在 HTML 中会发生这种情况。

我正在制作一个基于 HTML 的简历，当我将鼠标指针悬停在我的 ul 上时，它会激活这样的功能。

$("li#about").hover(function(){
  $("#content1").toggle();
});

问题 当我的#content 不再隐藏时将鼠标悬停在我的选择器上时，我的页眉和 ul 框之间的边距会导致页面内抖动。

我从:

<header>
  <h1>Ryan Anderson</h1>
  <h3>Developer</h3>
</header>

<body>
 <div class="clearfix"> 
  <div class="column">
    <ul>
      <li id="about"> <span>About Me</span> </li>
      <li id='education'> <span>Education</span></li>
      <li id='info'> <span>Experience</span></li>
      <li id='ref'> <span>References</span></li>
    </ul>
  <div class="clr"></div>
 </div>

到:

<header>
   <h1>Ryan Anderson</h1>
   <h3>Developer</h3>

 <body>
  <div class="clearfix"> 
   <div class="column">
     <ul>
       <li id="about"> <span>About Me</span> </li>
       <li id='education'> <span>Education</span></li>
       <li id='info'> <span>Experience</span></li>
       <li id='ref'> <span>References</span></li>
     </ul>
   <div class="clr"></div>
  </div>
</header>

我的问题:

  • 零星抖动的原因是什么？将我的 ul 包裹在 header 标签中是如何防止这种情况发生的？

  • 我的解决方案是否符合礼仪？如果没有，你会推荐什么？

  • 如果您对编码礼仪有任何好的建议，请在评论中发布链接。

sing-song 作为新手，我知道我的代码一定看起来像便便。不管我为你添加了一个 fiddle 。

感谢阅读!我提前为丑陋的代码道歉。我也发布了一个 JSFiddle，认为它可以帮助任何其他新手概念化我的要求。 This fiddle without correction只需将结束 header 标记更改为我在上面指定的位置即可查看结果。

我的 fiddle :https://jsfiddle.net/dgibbins1/cwn6ws02/4/ 

header{
    background: #5a4c1c;
    border-radius:10px;
    opacity:0.85;
    padding:1px 0;
}

h1{
    margin: 0 0;
    color: white;
    padding-left:10px;
}

h3{
    color:#dad6c7;
    padding-left: 31px;
}

body{
    background:#dad6c7;

}


ul{
    list-style-type:none;
    padding: 0px 15px;
    margin: 50px 0;
}

span{
    color:white;
}

li{
    font-family:Helvetica;
}

div.column{
    border-style:solid;
    border-color:rgba(56,43,3,1);

}



#content1, #content2,#content3,#content4{
    opacity:1;
    display: none;
    padding: 3px auto;

}

.clear-fix{

}
.column li{
    padding:4px 0 4px 0;
    margin-top:30px;
    margin-bottom:30px;
    font-family:'Oswald', sans-serif;
    text-align: center;
    font-size: 20px;
    overflow: hidden;

}

.clr{
    clear:both;
    font-size:0;
}



.column{
    float:left;
    background-size: 220px 220px;   
    background:#5a4c1c;
    padding: 5px 2px;
    margin: 10px 10px 0 0;
    opacity:0.5;
    width: 15%;
    border-radius:20px;


}

.column li:hover{
    background: black;
    border-radius:20px;
}

.content{
    color:#5a4c1c;
    font-weight: bold;
    font-family: helvetica;
    width:85%;
}

.footer{

    text-align: center;
    background:#5a4c1c;
    color: white;
    padding: 10px 0;
    opacity: 0.5;
    margin-top: 30%;
    border-radius:10px;




   }

    <!DOCTYPE html>

    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
      <link href="/normalize.css" rel="stylesheet"> 
        <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
        <title> Resume: Ryan Anderson</title>
    </head>

    <header>
      <h1>Ryan Anderson</h1>
      <h3>Developer</h3>
    </header>


    <body>
     <div class="clearfix"> 
      <div class="column">
         <ul>
           <li id="about"> <span>About Me</span> </li>
           <li id='education'> <span>Education</span></li>
           <li id='info'> <span>Experience</span></li>
           <li id='ref'> <span>References</span></li>
         </ul>
        <div class="clr"></div>
     </div>


     <div id="content1" class="content show-description">
      <p>About me <br />
         <small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?</small>
      </p>
     </div>

     <div id="content2" class="content" >
      <p>Education <br />
         <small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?</small>
      </p>
     </div>

     <div id="content3" class="content">
      <p>Experience <br />
         <small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?</small>
      </p>
     </div>

     <div id="content4" class="content">
       <p>References <br />
          Paul Garven (co-worker): (780)-828-1111<br />
          Paul CWC (owner of CWWC): (416)- 721-1111<br />
          Someone at Bitmaker: (416-967-11-11
       </p>
     </div>
    </div>


    <div class="footer">
      <p>Contact <br/>
           <small>mobile: (647)-333-8723 <br/>
           e-mail: hotmail@gmail.com</small>
      </p>
    </div>

    <script>

    $("li#about").hover(function(){
          $("#content1").toggle();
    });

    $("li#education").hover(function() {
          $("#content2").toggle();
    });

    $("li#info").hover(function() {
          $("#content3").toggle();
    });

    $("li#ref").hover(function() {
          $("#content4").toggle();
    });
    </script>

    </body>

最佳答案

您的 CSS 有错误。 

#content1, #content2,#content3,#content4{
    opacity:1;
    display: none;
    padding: 3px auto; <--
}

padding 不取值 auto。

将其切换为 padding-top:3px; padding-bottom:3px; 抖动将停止。

链接:Working proof

关于javascript - margin 移动 : <ul> jitters when hover function initiated.，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41449869/

26 4 0
文章推荐： c# - 使用 Entity Framework 将具有新角色的用户更新到数据库中
文章推荐： node.js - 使用 oauth.io 的 Refresh_token
文章推荐： node.js - 如何将变量从 Jade 模板文件传递到 Javascript 文件？
文章推荐： html - z-index 在服务元素中不起作用
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com