I am a newbie to css. 
I have two td in a row of which first has overflow visible. The contents in the first div are overlapping with the second td as in the example below. I wish to make the div css properties like cursor: pointer over the second td. Thus, the div css properties should be on top of the second td.
Please help me with this. 

<https://jsfiddle.net/jt00uk3e/>

Thanks.

```css
table {
    width: 0px;
    table-layout: fixed;
}

td {
    width:50px;
    height:50px;
    overflow: visible;
}

#td1 {
    background-color: red;
}

#td2 {
    background-color: green;
}

#div2 {
    width: 200px;
    height: 20px;
    background-color: blue;
    cursor: pointer;
}
```

```html
<table>
    <tr>
        <td id="td2"><div id="div2"></div></td>
        <td id="td1"></td>
    </tr>
</table>
```