<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } ul li { position: relative; float: left; list-style: none; border: 1px solid blue; width: 200px; height: 300px; margin-left: -1px; } ul li:hover { /* position: relative; If the box is not positioned , After adding relative positioning, the mouse can */ z-index: 1; border: 1px solid red; } </style></head><body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul></body></html>The border between the second and third boxes does not overlap
