css 链接上的边框悬停而不移动元素

Posted 2021-05-13

/*1. Add a transparent border without the hover, give it color on hover*/
item{
  border: 3px solid transparent;
}
item:hover{
  border: 3px solid inherit;
}

/*2. Using 'box-sizing' but then you have to define the width and the height*/
item {
    box-sizing: border-box;
}

item:hover {
    border-top: 3px solid #d0d0d0;
}
/*3. Substracting margin with a value of the border (in px)*/
item:hover{
  border: 3px solid inherit;
  margin: -3px;
}