<!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>负margin的用处</title> <style> ul li{ width: 200px; height: 300px; float: left; border: 1px solid #000; margin-left: -1px; /* border: 1px solid #f00; */ } ul li:hover{ border: 1px solid #f00; position: relative; z-index: 1; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </body> </html>
记得让hover元素成定位并且层级高于0，否则边框会被覆盖
效果：
