我如何解决我在 CSS 中的嵌套 div 悬停问题答案

【问题标题】：How can ı resolve my nested div hover problem in css我如何解决我在 CSS 中的嵌套 div 悬停问题
【发布时间】：2021-05-06 23:07:47
【问题描述】：

#main_div {
    background-color: #333;
    margin-top: 5%;
    border-radius: 10px;
    box-shadow: 12px 12px 18px #000;
    -moz-box-shadow: 12px 12px 18px #000;
    -webkit-box-shadow: 12px 12px 18px #000;
    border-left: 5px solid orange;
    border-top: 5px solid orange;
    height: 800px;
}
    
a {
  background-color: orange !important;
}

a:hover {
    border-left: 5px solid darkorange !important;
    border-top: 5px solid darkorange !important;
    transition: 0.4s;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

<div id="main_div">
    <a href"#">
         <div><span>Hello World!</span></div>
    </a>
</div>

我正在尝试悬停 div。 “a”在悬停位置增长。但我有一个问题随着成长，main_div 也随之成长。如何防止main_div 增长。

【问题讨论】：

包装器div 没有增长，因为您使用了scale，而是因为您在:hover 上添加了border-width。在您的元素上添加边框并且只在悬停时更改颜色，您可以将此颜色设置为透明。

标签： html css hover

【解决方案1】：

如上所述，尝试为边框设置一些宽度，然后在悬停时更改其颜色。

#main_div {
  background: black;
  padding: 1rem;
  text-align: center;
}

a {
  display: inline-block;
  color: #fff;
  border-top: 5px solid transparent;
  border-left: 5px solid transparent;
  padding: 1rem;
  transition: all .3s ease;
}

a:hover {
  transform: scale(1.1);
  border-color: orange;
}

<div id="main_div">
    <a href"#">
         <div><span>Hello World!</span></div>
    </a>
</div>

【讨论】：