在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ div放在表格單元格中，并且設(shè)置鼠標(biāo)移入的樣式，但是有一部分鼠標(biāo)沒有出現(xiàn)手指

div放在表格單元格中，并且設(shè)置鼠標(biāo)移入的樣式，但是有一部分鼠標(biāo)沒有出現(xiàn)手指

先上代碼

<!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>

當(dāng)鼠標(biāo)放在div 上的時候，應(yīng)該出現(xiàn)手指，如下圖

但是再表格里的情況是：
圖片描述

只有一部分位置會出現(xiàn)：

clipboard.png
求大神?。?！

回答
編輯回答
執(zhí)念

你把td設(shè)置個背景色就能看出原因了，后面的td把前面的紅圓圈蓋住了
圖片描述

最好調(diào)整下結(jié)構(gòu)，紅圓圈不在table里面，table當(dāng)作背景，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>
2018年6月3日 20:15