I have made a little pop up when I hover over a square but I want to go to this popup even with an existing margin.

Here is a snippet with my HTML and CSS code:

```css
.vertical {
    height: 70px;
    width: 70px;
    border-radius: 5px;
    margin-bottom: 10px;
    margin-right: 10px;
    border: solid lightgrey;
    position: relative;
}

.frame {
    height: 100%;
}

.st {
    height: 250px;
}

.info {
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 120%;
    margin-left: -5px;
    border-radius: 5px;
    border: solid black 1px;
    color: white;
}

.vertical:hover .info {
    visibility: visible;
}

.arrow {
    position: absolute;
    right: 100%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent rgba(2, 0, 0, 0.75) transparent transparent;
    top: 25px;
}
```

```html
<div class="vertical">
   <div class="frame"></div>
   <div class="info">
      <div class="header">
         <div class="name">Hover</div>
      </div>
      <div class="st"></div>
      <div class="arrow"></div>
   </div>
</div>
```

Here is an example (if you don't follow the arrow the popup will close): 

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

I want to ignore the margin and allow the user to go to the popup and make it work as if there was no margin
['https://Stackoverflow.com/questions/55284103', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/9419485/']
My strategy would be to put the element to be shown on hover at `left:100%` so that there's no gap for the cursor to "fall in". You can then use `padding` on this element to create the visual whitespace between the main element and the hover element, and put the element's content in an inner element `.info-inner` in my example. Note that `.info-inner` must be `position:relative` for the positioning of the `.arrow` to work.

Let me know if this works for you.

```css
.vertical {
    height: 70px;
    width: 70px;
    border-radius: 5px;
    margin-bottom: 10px;
    margin-right: 10px;
    border: solid lightgrey;
    position: relative;
}

.frame {
    height: 100%;
}

.st {
    height: 250px;
}

.info {
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 100%;
    padding-left: 10px;
}

.info-inner {
    border-radius: 5px;
    border: solid black 1px;
    color: white;
    position: relative;
}

.vertical:hover .info {
    visibility: visible;
}

.arrow {
    position: absolute;
    right: 100%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent rgba(2, 0, 0, 0.75) transparent transparent;
    top: 25px;
}
```

```html
<div class="vertical">
   <div class="frame"></div>
   <div class="info">
      <div class="info-inner">
        <div class="header">
           <div class="name">Hover</div>
        </div>
        <div class="st"></div>
        <div class="arrow"></div>
      </div>
   </div>
</div>
```
You can use the css transitions property to delay the invisibility of the element.

Example:

```
.info{ transition: visibility 2s ease-out;}

```

[`Updated jsFiddle`](https://jsfiddle.net/4n10kwra/)

In this latter example, I increased the distance to the pop-up to improve the demo:

[`UPDATED Updated jsFiddle`](https://jsfiddle.net/4n10kwra/1/)

CSS transitions allow you to delay the advent/removal of a css modification to the DOM, giving the user time to slide the mouse from the box to the pop-up.

References:

<https://css-tricks.com/almanac/properties/t/transition-delay/>

<https://www.w3schools.com/cssref/css3_pr_transition-delay.asp>