Javascript 保证金转移：<；ul>；悬停功能启动时会出现抖动。_Javascript_Html_Css

Javascript 保证金转移：<；ul>；悬停功能启动时会出现抖动。

javascript html css

Javascript 保证金转移：<；ul>；悬停功能启动时会出现抖动。,javascript,html,css,Javascript,Html,Css,这只是一个基于理论的问题。我对编程相当陌生，想知道为什么在HTML中会发生这种情况我正在制作一份基于HTML的简历，当我将鼠标指针悬停在我的ul上时，它将激活这样一个功能 $("li#about").hover(function(){ $("#content1").toggle(); }); 当我的内容不再隐藏时，问题在选择器上徘徊时，标题和ul框之间的边距将导致页面内的抖动我来自： <header> <h1>Ryan Anderson</h1>

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

我正在制作一份基于HTML的简历，当我将鼠标指针悬停在我的

ul

上时，它将激活这样一个功能

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

当我的内容不再隐藏时，问题在选择器上徘徊时，标题和

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>

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

你的一些css也是不正确的

$（“li#about”）.hover（函数（）{
$（“#content1”）.toggle（）；
});
$（“li#education”）.hover（函数（）{
$（“#content2”）.toggle（）；
});
$（“li#info”）。悬停（函数（）{
$（“#content3”）.toggle（）；
});
$（“li#ref”）。悬停（函数（）{
$（“#content4”）.toggle（）；}）

标题{
背景：#5a4c1c；
边界半径：10px；
不透明度：0.85；
填充：1px0；
}
minheight先生{
最小高度：200px；
}
h1{
利润率：0；
颜色：白色；
左侧填充：10px；
}
h3{
颜色：#dad6c7；
左侧填充：31px；
}
身体{
背景：#dad6c7；
}
保险商实验室{
列表样式类型：无；
填充：0px 15px；
利润率：50px0；
}
跨度{
颜色：白色；
}
李{
字体系列：Helvetica；
}
分栏{
边框样式：实心；
边框颜色：rgba（56,43,3,1）；
}
#内容1，
#内容二,，
#内容三,，
#内容4{
不透明度：1；
显示：无；
填充：3倍自动；
}
1.清除故障{
} 
李先生{
填充：4px0 4px0；
边缘顶部：30px；
边缘底部：30px；
字体系列：“Oswald”，无衬线；
文本对齐：居中；
字体大小：20px；
溢出：隐藏；
}
.clr{
明确：两者皆有；
字号：0；
}
.栏目{
浮动：左；
背景尺寸：220px 220px；
背景：#5a4c1c；
填充物：5px2px；
保证金：10px 10px 10px 0；
不透明度：0.5；
宽度：20%；
最小宽度：134px；
边界半径：20px；
}
.列李：悬停{
背景：黑色；
边界半径：20px；
}
.内容{
颜色：#5a4c1c；
字体大小：粗体；
字体系列：helvetica；
宽度：85%；
}
.页脚{
文本对齐：居中；
背景：#5a4c1c；
颜色：白色；
填充：10px0；
不透明度：0.5；
利润率最高：30%；
边界半径：10px；
明确：两者皆有；
}


莱恩-安德森
开发商

关于我

教育

经验

参考文献


关于我


Lorem ipsum dolor sit amet，奉献精英。无需履行义务，但必须明确说明拟铜酸盐临时替代物的责任。杜西姆斯沃鲁帕特斯沃鲁帕特斯沃鲁帕特斯？

教育


Lorem ipsum dolor sit amet，奉献精英。无需履行义务，但必须明确说明拟铜酸盐临时替代物的责任。杜西姆斯沃鲁帕特斯沃鲁帕特斯沃鲁帕特斯？

经历


Lorem ipsum dolor sit amet，奉献精英。无需履行义务，但必须明确说明拟铜酸盐临时替代物的责任。杜西姆斯沃鲁帕特斯沃鲁帕特斯沃鲁帕特斯？

参考资料
保罗·加文（同事）：（780）-828-1111
保罗·CWC（CWWC的所有者）：（416）-721-1111

比特制作人：（416-967-11-11）

接触


手机：（647）-333-8723

电邮：hotmail@gmail.com

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

你的一些css也是不正确的

$（“li#about”）.hover（函数（）{
$（“#content1”）.toggle（）；
});
$（“li#education”）.hover（函数（）{
$（“#content2”）.toggle（）；
});
$（“li#info”）。悬停（函数（）{
$（“#content3”）.toggle（）；
});
$（“li#ref”）。悬停（函数（）{
$（“#content4”）.toggle（）；}）

标题{
背景：#5a4c1c；
边界半径：10px；
不透明度：0.85；
填充：1px0；
}
minheight先生{
最小高度：200px；
}
h1{
利润率：0；
颜色：白色；
左侧填充：10px；
}
h3{
颜色：#dad6c7；
左侧填充：31px；
}
身体{
背景#dad6c7；
}
保险商实验室{
列表样式类型：无；
填充：0px 15px；
利润率：50px0；
}
跨度{
颜色：白色；
}
李{
字体系列：Helvetica；
}
分栏{
边框样式：实心；
边框颜色：rgba（56,43,3,1）；
}
#内容1，
#内容二,，
#内容三,，
#内容4{
不透明度：1；
显示：无；
填充：3倍自动；
}
1.清除故障{
} 
李先生{
填充：4px0 4px0；
边缘顶部：30px；
边缘底部：30px；
字体系列：“Oswald”，无衬线；
文本对齐：居中；
字体大小：20px；
溢出：隐藏；
}
.clr{
明确：两者皆有；
字号：0；
}
.栏目{
浮动：左；
背景尺寸：220px 220px；
背景：#5a4c1c；
填充物：5px2px；
保证金：10px 10px 10px 0；
不透明度：0.5；
宽度：20%；
最小宽度：134px；
边界半径：20px；
}
.列李：悬停{
背景：黑色；
边界半径：20px；
}
.内容{
颜色：#5a4c1c；
字体大小：粗体；
字体系列：helvetica；
宽度：85%；
}
.页脚{
文本对齐：居中；
背景：#5a4c1c；
颜色：白色；
填充：10px0；
不透明度：0.5；
利润率最高：30%；
边界半径：10px；
明确：两者皆有；
}


莱恩-安德森
开发商

关于我

教育

经验

参考文献

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


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>

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