javascript - margin 移动 : <ul> jitters when hover function initiated.-6ren

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

转载作者：太空宇宙更新时间：2023-11-03 22:47:40

这只是一个基于理论的问题。我对编程还很陌生，想知道为什么在 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/

文章推荐： node.js - 使用 oauth.io 的 Refresh_token

文章推荐： html - z-index 在服务元素中不起作用

html - CSS 底部边框悬停 "jitter"
我有一个导航栏，当您将鼠标悬停在导航按钮上时，我想给它一个橙色的底部边框。唯一的问题是，无论何时悬停，边框都会使内容/导航按钮“抖动”，这是它们不应该的。此外，我已经在导航栏上始终设置了黑色底部边框，
r - "jitter"函数在 R 中起什么作用？
根据documentation ，jitter 函数的解释是“向数值向量添加少量噪声。” 这是什么意思？是否有一个随机数与向量中的每个数字相关联并添加到其中？最佳答案抖动确实意味着只是将随机噪声
c# - C# 编译器或 Jitter 会优化这些类型的算术运算吗？
假设我有这样的东西: for (int i = 0; i > 1或 x << 1 . Does the jitter actually do so when it is legal? 我不知道。试试吧
ios - 照片框架 : UICollectionView scrolling jitter
我正在使用 Photos 框架和 requestImageForAsset: 花费太多时间，因此它的滚动性能确实很差。我尝试将 PHImageRequestOptions 选项设置为: let op
ios - 滚动时应用 CollectionView layerMask "jitter"
我正在开发一个 View Controller 原型(prototype)，该原型(prototype)由具有以下要求的 collectionView 组成: 有一张背景图片可见部分可以像 Acco
java - Java 的 JITter 如何影响测量代码速度？
我是 Java 的新手，我很好奇 Java 与 C++ 相比如何处理普通任务。因此，我将 2 个 C++ 字符串格式化方法(sprintf 和 ostringstream)与使用 Java 的 Str
java - Java中的 jitter buffer 实现
我正在为我的VOIP应用程序寻找Java中的自适应 jitter buffer 实现。我为应用程序编写了一个固定的 jitter buffer ，但是由于网络质量差，我遇到了缓冲区不足或缓冲区溢出的问
r - 在 ggplot2 中添加完全相同数量的水平传播/"jitter"/闪避
我要绘制三个组的测量值，每个组有五个观察值。我想绘制所有点，但是每个组中的数值都非常接近。改变 alpha 有帮助，但仍然很难观察到单独的点。因此我想添加一些水平扩展(在 X 轴上)。点的部分重叠是
r - 如何使用 "jitter"生成相同的图，以及如何抖动选定的点(不是所有点)？
我想做的是: a) 让 ggplot 代码每次运行时生成的图都相同 [set.seed 是一种概念吗？] 和 b) 仅对具有相同 y 轴值的标签进行抖动文本标签 - 保留其他文本标签。这似乎是某种基于
r - 在 ggplot2 中添加完全相同数量的水平传播/"jitter"/闪避
我要绘制三个组的测量值，每个组有五个观察值。我想绘制所有点，但是每个组中的数值都非常接近。改变 alpha 有帮助，但仍然很难观察到单独的点。因此我想添加一些水平扩展(在 X 轴上)。点的部分重叠是
audio - Gstreamer:RTP jitter buffer 在丢包时无法正常工作？
对于 VoIP 语音质量监控应用程序，我需要将传入的 RTP 音频流与引用信号进行比较。对于信号比较本身，我使用预先存在的专用工具。对于其他部分(抓包除外)，Gstreamer 库似乎是一个不错的选择
javascript - Bootstrap Collapse 有 snap\jitter
使用 Bootstrap (3.3.6) 折叠，可折叠的 DIV 位于表单输入\标签之间。当 DIV 展开\隐藏时，会出现一种快速\抖动。问题代码:https://jsfiddle.net/ybto
c# - C# JITter 能否优化重复的委托(delegate)调用？
在我当前的代码库中，复杂的 if 语句通常被委托(delegate)调用所取代。由于代码的结构，在应用程序的过程中将多次调用同一个委托(delegate)。例如， class ExampleClass
Android Gallery widget "jitter"/"jumping"/行为怪异
我的一个应用程序中的 Gallery 小部件遇到了一个相当奇怪的问题，我想是时候问问其他人了，因为它已经困扰我很长时间了. 我正在为 Gallery 小部件使用自定义 Adapter，并且我在此为 G
c# - C# 编译器/优化命令行选项会影响 JITter 吗？
我一直在阅读 Eric Lippert的 article关于 C# 编译器的/optimize 命令行选项。文章描述了编译器执行的优化类型。但是，我仍然不清楚此选项是否也会影响 JIT 优化。并非不可
html - CSS 过渡字体大小 : avoid jittering/wiggling
我制作了以下图 block ，带有悬停效果，通过 CSS-transition 增加了 font-size: body { font-family: 'Segoe UI', sans-serif;
linux - Linux Scheduler 是否知道硬件中断(Scheduler Jitter)
如果一个进程被硬件中断(第一级中断处理程序)中断，那么 CPU 调度程序是否意识到这一点(例如，调度程序是否独立于被中断的进程计算硬件中断的执行时间)？更多详情:我正在尝试解决以下问题:htop 中
max-msp-jitter - 如何在 Max/MSP 补丁中分层多层图像？
附上一张照片来解释这个概念，但本质上，我想要一个背景视频或图像，上面有多个 png 像这样分层。我将如何实现这一目标？我觉得 jit.alphablend 是这个的一个组成部分...... 我也在
r - 如何将 ggplot2 中的 jitter() 数量转换为position_jitter() 宽度？
我正在更新a package that uses base graphics至 one that uses ggplot2 graphics 。在基本图形版本中，用户可以为 jj 提供一个值，然后该值

太空宇宙

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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

首页

博学

6Ren·AI

商城

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

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