CSS Mouse hover div after display div outside the button question

Yesterday writing style encountered a problem, how to let the mouse hover p, display the button outside the P, you can click to the button. The following through this article to everyone to share the CSS mouse hover p display outside the button solution, interested friends to see it together

Yesterday writing style encountered a problem, how to let the mouse hover p, display the button outside the P, you can click to the button.

The effect is as follows:

Problem:

It's a straightforward idea to set the button to Display:block at p hover, but there's a problem with the button disappearing when the mouse moves to the button and leaves the p through the distance.

Workaround:

1. Select a larger area of P

This time the button appears hover, because the mouse is still in the P (large area), so the button can be normal point to. But the problem with this method is that it expands the triggering area, and if it is intended to be triggered by the initial p, then this method does not work.

2. Add a non-visible layer

As shown in the Blue box, add an absolutely positioned area to the bottom of the button in P, so that when the mouse moves to the button, it is inside the P and the button does not disappear. The advantage of this method is that the triggering area is absolutely appropriate.

p{    Position:absolute;    . hover-help{        Position:absolute;        height:20px;        width:26px;        Left: -20px;        bottom:0;    }    }