Mark Hedberg Mark Hedberg - 3 months ago 6
CSS Question

Limiting ":hover" area of "div"

I've created a popup box that shows when hovered over an image. This is my code:

HTML:

<div class="infoimg" style="float: left;"><img src="http://i.imgur.com/W1FxGnH.png" alt="Lorem ipsum" width="62" height="61">
<div class="infobox"><span>Lorem ipsum</span>
<ul style="padding-top: 15px;padding-left:5px; margin-left: 5px;list-style-type: disc;">
<li>Lorem ipsum dolor sit amet.</li>
<li>Consectetur adipiscing elit.</li>
<li>Sed maximus magna vel facilisis vulputate.</li>
<li>Mauris sit amet elit sit amet ipsum.</li>
</ul>
</div>
</div>


CSS:

.infobox {
opacity: 0;
-webkit-transition: opacity 0.4s ease-in-out;
-moz-transition: opacity 0.4s ease-in-out;
-ms-transition: opacity 0.4s ease-in-out;
-o-transition: opacity 0.4s ease-in-out;
transition: opacity 0.4s ease-in-out;
position: absolute;
top: 0;
left: 72px;
right: 0;
width: 200px;
height: 110px;
border-radius: 5px;
background: #fff;
border: 1px solid #000;
color: black;
font-family: Verdana;
font-size: 9px;
padding: 10px 10px;
line-height: 12px;
}

.infoimg:hover div.infobox {
opacity: 1;
position: absolute;
top: 0;
left: 72px;
right: 0;
width: 200px;
height: 110px;
border-radius: 5px;
background: #fff;
border: 1px solid #000;
color: black;
font-family: Verdana;
font-size: 9px;
padding: 10px 10px;
line-height: 12px;
}


However, since I'm using "opacity: 0" for the "infobox" div instead of using "display: none" (to create a fade-in/out effect), the infobox is technically still there. This is where my issue comes in, when the mouse hovers over the invisible "infobox" area, the hovering effect takes place. What I wanted was to initiate the hovering effect only when the mouse pointer is over the "infoimg" div. I've tried applying the following code to try to limit the area but it did not work:

.infoimg {
width: 62px;
height: 61px;
}


Here's a JSFiddle link for a live demonstration of what my issue is: https://jsfiddle.net/x9h5rqdw/

As you can see, when the mouse is over the empty area (infobox) next to "infoimg", the hover effect gets initiated.

Answer

It's very simple. You need to add visibility: hidden; and visibility: visible;

CSS:

.infobox {
  opacity: 0;
  -webkit-transition: 0.4s ease-in-out;
  -moz-transition: 0.4s ease-in-out;
  -ms-transition: 0.4s ease-in-out;
  -o-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
  position: absolute;
  top: 0;
  left: 72px;
  right: 0;
  width: 200px;
  height: 110px;
  border-radius: 5px;
  background: #fff;
  border: 1px solid #000;
  color: black;
  font-family: Verdana;
  font-size: 9px;
  padding: 10px 10px;
  line-height: 12px;
  /* here */
  visibility: hidden;
}

.infoimg:hover div.infobox {
  opacity: 1;
  position: absolute;
  top: 0;
  left: 72px;
  right: 0;
  width: 200px;
  height: 110px;
  border-radius: 5px;
  background: #fff;
  border: 1px solid #000;
  color: black;
  font-family: Verdana;
  font-size: 9px;
  padding: 10px 10px;
  line-height: 12px;
  /* here */
  visibility: visible;
}

.infoimg {
  width: 62px;
  height: 61px;
  -webkit-transition: 0.4s ease-in-out;
  -moz-transition: 0.4s ease-in-out;
  -ms-transition: 0.4s ease-in-out;
  -o-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
}

pointer-events: none; is the simplest way but it's not cross browser: http://caniuse.com/#feat=pointer-events

Working example: https://jsfiddle.net/x9h5rqdw/4/

Comments