CSS hover the cursor over the DIV to display the button outside the DIV, cssdiv

CSS hover the cursor over the DIV to display the button outside the DIV, cssdiv

There was a problem with style writing yesterday. After hovering the cursor over the DIV, you can click the button outside the DIV.

The effect is as follows:

Problem:

When DIV hover is used, it is very straightforward to set the button to display: block, but this is a problem, that is, after the button is suspended, the mouse is to move to the button, when the DIV is left behind, the button disappears.

Solution:

1. Select a DIV in a larger area.

In this case, the buttons displayed by hover can be clicked normally because the cursor is still in the DIV (large area. But the problem with this method is that it expands the trigger area. If it is intended to be triggered by the initial DIV, this method will not work.

2. Add an invisible layer

As shown in the blue box, add an absolute positioning area to the bottom of the button in the DIV, so that the button will not disappear when the mouse moves to the button. The advantage of this method is that the trigger area is absolutely appropriate.

Div {position: absolute;. hover-help {position: absolute; height: 20px; width: 26px; left:-20px; bottom: 0 ;}}