九宫格移入demo

实现九宫格,且鼠标移入的时候仅边框变色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body, div {
            margin: 0;
            padding: 0;
        }
        .container {
            margin:  10px auto;
            width: 154px;
            height: 154px;
            font-size: 0px;
        }
        .box a {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 50px;
            border: 1px solid #888;
            margin-left: -1px;
            margin-top: -1px;
            text-align: center;
            line-height: 50px;
            font-size: 14px;
            z-index: 1;
        }
        .box a:hover {
            border-color:red;
            z-index: 2;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">
            <a href="">1</a>
            <a href="">2</a>
            <a href="">3</a>
            <a href="">4</a>
            <a href="">5</a>
            <a href="">6</a>
            <a href="">7</a>
            <a href="">8</a>
            <a href="">9</a>
        </div>
    </div>
    <div class="parsent">
        <a href="" class="child">1</a>
        <a href="" class="child">2</a>
        <a href="" class="child">3</a>
    </div>
    <script src="demo.js"></script>
</body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,259评论 4 61
  • 今天是休息,闲着无聊点开视频想看会综艺。看到最新一期的《王牌对王牌》的标题是“朱茵时隔23年后再演紫霞”。因为很喜...
    东野KSJ阅读 936评论 0 16
  • 三年后的今天,或者前天,他有了新的女友,介绍给他的哥们牙哥认识,应该是认真的吧,应该很喜欢那个姑娘,那姑娘确实很漂...
    claireyys阅读 97评论 0 0