CODEWITHSUNDEEP
csshover
Zeyukan Ich'
Zeyukan Ich'

Reputation: 693

Ignore margin for hover in CSS

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:

.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;
}
<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

Upvotes: 6

Views: 2881

Answers (3)

DreamTeK
DreamTeK

Reputation: 34287

There are several ways to do this but here is one example. It simple positions the element next to the previous one without a gap.

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

.infoWrap {
  opacity: 0;
  position: absolute;
  top: -3px;
  left: 100%;
  padding: 0 10px;
  transition: all ease-in-out 0.2s;
}

.info {
  position: relative;
  background: #eee;
  border: solid #aaa 1px;
  border-radius: 5px;
  color: #666;
  width: 100%;
  min-height: 53px;
  padding: 10px;
}

.vertical:hover .infoWrap {
  opacity: 1;
}

.arrow {
  position: absolute;
  right: 100%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent #aaa transparent transparent;
  top: 25px;
}
<div class="vertical">

  <div class="infoWrap">
    <div class="info">
      <div class="header">
        <div class="name">Hover</div>
      </div>
      <div class="arrow"></div>
    </div>
  </div>

</div>

Upvotes: 1

cssyphus
cssyphus

Reputation: 40096

You can use the css transitions property to delay the invisibility of the element.

Example:

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

Updated jsFiddle

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

UPDATED Updated jsFiddle

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

Upvotes: -1

nvioli
nvioli

Reputation: 4219

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.

.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;
}
<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>

Upvotes: 2

Related Questions