Begrenzung ": Hover" Bereich von "Div"

Question

Ich habe ein Popup-Fenster erstellt, das zeigt, wenn über ein Bild schwebte. Dies ist mein 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; 
} 

Da aber ich bin mit "Opazität: 0" für die "infobox" div statt mit „-Display : keine "(um einen Ein-/Ausblendeffekt zu erzeugen), ist die Infobox technisch immer noch da. Hier kommt mein Problem ins Spiel, wenn die Maus über die unsichtbare "Infobox" schwebt, findet der Schwebeeffekt statt. Ich wollte den Schwebeeffekt nur auslösen, wenn der Mauszeiger über dem "infoimg" div ist. Ich habe versucht, den folgenden Code der Anwendung zu versuchen, den Bereich zu begrenzen, aber es hat nicht funktioniert:

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

hier ein JSFiddle Link für eine Live-Demonstration dessen, was mein Problem ist: https://jsfiddle.net/x9h5rqdw/

Wie Sie sehen können Wenn sich die Maus über dem leeren Bereich (Infobox) neben "Infoimg" befindet, wird der Hover-Effekt ausgelöst.

Answer 1

Es ist sehr einfach. Sie müssen hinzufügen visibility: hidden; und 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; der einfachste Weg ist, aber es ist nicht Cross-Browser: http://caniuse.com/#feat=pointer-events

Arbeitsbeispiel: https://jsfiddle.net/x9h5rqdw/4/

Answer 2

Sie können pointer-events: none auf .infobox festlegen, um dieses Verhalten zu beheben.

Mit den CSS-Eigenschaftszeiger-Ereignissen können Autoren steuern, unter welchen Umständen (falls vorhanden) ein bestimmtes Grafikelement zum Ziel von Mausereignissen werden kann. Wenn diese Eigenschaft nicht angegeben ist, gelten die gleichen Eigenschaften des visiblePainted-Werts für den SVG-Inhalt.

Quelle: https://developer.mozilla.org/en/docs/Web/CSS/pointer-events