问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

border边框线重叠使用margin-right:-1px解决，怎么在:hover的情况下,最右边的边框显示出来？

头像
Arthur
    10410
    <!DOCTYPE html>
 <html class="no-js"> 
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
        <style>
            *{margin: 0px;padding: 0px;}
            a{text-decoration: none;}
            .wrap{width: 440px;height: 90px;margin: 30px auto;}
            .wrap a{float: left;height: 40px;padding: 0 15px;line-height: 40px;border: 2px solid blue;margin-right:-2px;}
            a:hover{border-color: red;}
        </style>
    </head>
    <body> 
        <div class="wrap">
            <a href="">aaa</a>
            <a href="">bbbbb</a>
            <a href="">ccc</a>
            <a href="">ddddddd</a>
            <a href="">eeeee</a>
            <a href="">ffff</a>
        </div>
    </body>
</html>

    效果图如下：
    图片描述

    我想要的效果：
    图片描述

    请问有什么方法可以做到，谢谢~

    htmlcsshtml5
    阅读 3.4k
    1 个回答
    得票最新
    头像
    布列瑟农的星空
      1.4k21127
      ✓ 已被采纳
      a:hover {
    border-color: red;
    transform: translateX(0);
}

      机智如我?

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题