为什么我的导航栏中会出现两种悬停效果？

【问题标题】：Why do I get two types of hover effects in my navbar?为什么我的导航栏中会出现两种悬停效果？
【发布时间】：2022-01-02 07:38:24
【问题描述】：

当我将鼠标悬停在导航栏项目上时，为什么会获得两种类型的动画效果？首先它显示矩形背景然后它变成圆形（我想要的）

<div class="container">
       <a href="https://www.google.com/"><div class="items" id="item-1">Home </div></a>


.items {
    padding-inline:20px ;
    padding-block: 10px;
    font-size: larger;
    margin-inline: 35px;
}

a {
    color: black;
    text-decoration:none ;
}


#item-1:hover {
    background-color: rgb(3, 151, 3);
    color: white;
    border-radius: 20px;
    transition: 0.15s;
    cursor:pointer ;    
}

【问题讨论】：

其中之一是父<a>上的:hover效果；另一个 :hover 对孩子的影响 (#item-1)。
另一个问题：为什么在“a”标签内需要一个 div？你可以使用 span 代替
你没有'两种类型的悬停' - 只是从矩形 item-1（默认边框半径为 0）到具有半径的边框。

标签： css hover border navbar

【解决方案1】：

这是因为#item-1默认没有border-radius，所以当你悬停它时，它开始应用border-radius，并且由于你设置了transition: 0.15s;，所以这个过渡将适用于更改所有样式。要解决它，您可以默认将border-radius 设置为#item-1，并使用悬停效果更改它的背景，如下所示：

.items {
  padding-inline: 20px;
  padding-block: 10px;
  font-size: larger;
  margin-inline: 35px;
}

a {
  color: black;
  text-decoration: none;
}

#item-1 {
  border-radius: 20px;
  transition: 0.15s;
}

#item-1:hover {
  background-color: rgb(3, 151, 3);
  color: white;
  cursor: pointer;
}

<div class="container">
  <a href="https://www.google.com/">
    <div class="items" id="item-1">Home </div>
  </a>

【讨论】：