Question

这只是一个基于理论的问题。我对编程很新，并且想知道为什么会在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是如何阻止这种情况发生的？
我的解决方案是礼仪吗？如果没有，你会推荐什么？
如果您对编码礼仪有任何好的建议，请在评论中发布链接。

唱歌作为新人，我知道我的代码必须看起来像便便。无论我为你添加一个小提琴。

感谢您的阅读！我提前为丑陋的代码道歉。我也发布了一个JSFiddle，认为它可以帮助任何其他新手概念化我的要求。这个小提琴是没有更正只需将结束标题标记更改为我在上面指定的位置以查看结果。

我的小提琴：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>

Answer 1

您的CSS中有错误。

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

填充不会取值auto。

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

链接：Working proof

Answer 2

您的标记存在一些问题你的一些嵌套应用不正确。事实上我甚至不确定我发现了所有的错误

你的一些css也不正确

$("li#about").hover(function() {
      $("#content1").toggle();
    });

    $("li#education").hover(function() {
      $("#content2").toggle();
    });

    $("li#info").hover(function() {
      $("#content3").toggle();
    });

    $("li#ref").hover(function() {
      $("#content4").toggle();})

header {
  background: #5a4c1c;
  border-radius: 10px;
  opacity: 0.85;
  padding: 1px 0;
}
.minheight {
  min-height: 200px;
}
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 10px 0;
  opacity: 0.5;
  width: 20%;
  min-width:134px;
  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;
  clear:both;
  
}

<link href="//normalize-css.googlecode.com/svn/trunk/normalize.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <h1>Ryan Anderson</h1>
  <h3>Developer</h3>
  <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>

</body>

保证金转移：当悬停功能启动时<ul>抖动。

2 个答案: