Question

当我在元素中使用悬停所有其他元素向右移动时，可能是我在许多其他页面中多次出现此问题的原因

这是我的HTML代码

＆＃13;

li:hover{border:solid 1px black;}

＆＃13;

    <html lang=en>
  <head>
    <title>Testing</title>
    <meta charset= utf-8>
  </head>
  <body>
    <div id="container">
      <section id="main">
         <h1 >Home Page</h1>
       </section>
      <section id="list">
      <ul>
      <li class="list">Home</li>
      <li>about</li>
      <li>blog</li>
      <li>contact</li>
      </section>
      <section id = "para">
         <p>
      

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed tempor and vitality, so that the labor and sorrow, some important things to do eiusmod. Over the years, I will come, who will nostrud aliquip out of her the advantage of exercise, so that stimulus efforts if the school district and longevity. Want to be a pain in the cupidatat cillum has been criticized in the Duis et dolore magna flee produces no resultant pleasure. Excepteur cupidatat blacks are not excepteur, is soothing to the soul, that is, they deserted the general duties of those who are to blame for your troubles.</p>
      </section>
      
    </div>
  </body>
</html>

＆＃13;

CSS代码

在上面的代码html页面中，您可以看到当我们将光标移动到联系人时，以下所有数据即段落向底部移动。我在很多页面都有这个问题。

Answer 1

边框基本上是彩色填充。您需要做的就是向未悬停的li元素添加填充。

li:hover{border:solid 1px black;}
li:not(:hover){padding-top:1px;padding-bottom:1px;}

<html lang=en>
  <head>
    <title>Testing</title>
    <meta charset= utf-8>
  </head>
  <body>
    <div id="container">
      <section id="main">
         <h1 >Home Page</h1>
       </section>
      <section id="list">
      <ul>
      <li class="list">Home</li>
      <li>about</li>
      <li>blog</li>
      <li>contact</li>
      </section>
      <section id = "para">
         <p>
      

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed tempor and vitality, so that the labor and sorrow, some important things to do eiusmod. Over the years, I will come, who will nostrud aliquip out of her the advantage of exercise, so that stimulus efforts if the school district and longevity. Want to be a pain in the cupidatat cillum has been criticized in the Duis et dolore magna flee produces no resultant pleasure. Excepteur cupidatat blacks are not excepteur, is soothing to the soul, that is, they deserted the general duties of those who are to blame for your troubles.</p>
      </section>
      
    </div>
  </body>
</html>

Answer 2

只需给你的li元素一个透明的边框，或者一个与背景颜色相同的边框。

＆＃13;

li {
  border: solid 1px transparent;
}

li:hover {
  border: solid 1px black;
}

＆＃13;

<html lang=en>

<head>
  <title>Testing</title>
  <meta charset=u tf-8>
</head>

<body>
  <div id="container">
    <section id="main">
      <h1>Home Page</h1>
    </section>
    <section id="list">
      <ul>
        <li class="list">Home</li>
        <li>about</li>
        <li>blog</li>
        <li>contact</li>
    </section>
    <section id="para">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed tempor and vitality, so that the labor and sorrow, some important things to do eiusmod. Over the years, I will come, who will nostrud aliquip out of her the advantage of exercise, so that stimulus
        efforts if the school district and longevity. Want to be a pain in the cupidatat cillum has been criticized in the Duis et dolore magna flee produces no resultant pleasure. Excepteur cupidatat blacks are not excepteur, is soothing to the soul,
        that is, they deserted the general duties of those who are to blame for your troubles.
      </p>
    </section>
  </div>
</body>

</html>

＆＃13;

当我们悬停到悬停元素时，HTML所有元素都会移动？

2 个答案: