div放在表格单元格中,并且设置鼠标移入的样式,但是有一部分鼠标没有出现手指

先上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 15px;
            height: 15px;
            border-radius:99%; /* 圆边框*/
            background-color: red;
            position: absolute;
            left: 25px;
            top: 25px;
            cursor:pointer;
            z-index:2 ;
        }
        table{
            margin:100px auto ;
            border-collapse:collapse;
        }
        td{
            width: 30px;
            height: 30px;
            border: solid 1px black;
            position: relative;
            z-index:1 ;
        }
    </style>
</head>
<body>
<table>
    <tr>
        <td><div></div></td>
        <td><div></div></td>
        <td><div></div></td>
        <td><div></div></td>
    </tr>
    <tr>
        <td><div></div></td>
        <td><div></div></td>
        <td><div></div></td>
        <td><div></div></td>
    </tr>
    <tr>
        <td><div></div></td>
        <td><div></div></td>
        <td><div></div></td>
        <td><div></div></td>
    </tr>
    <tr>
        <td><div></div></td>
        <td><div></div></td>
        <td><div></div></td>
        <td><div></div></td>
    </tr>
</table>
</body>
</html>

当鼠标放在div 上的时候,应该出现手指,如下图

但是再表格里的情况是:
图片描述

只有一部分位置会出现:

clipboard.png
求大神!!!

阅读 2.1k
1 个回答

你把td设置个背景色就能看出原因了,后面的td把前面的红圆圈盖住了
图片描述

最好调整下结构,红圆圈不在table里面,table当作背景,div在外面!

<div class="main">
    <table>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
    <div class="content">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题