「div」の「ホバー」領域を制限する

Question

画像の上にマウスを置いたときに表示されるポップアップボックスが作成されました。これは私のコードです：

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

、私は "不透明度：0" を使用していますので、 "インフォボックス" の代わりに「ディスプレイを使用してのDIV

HTMLが

：none "（フェードイン/アウトエフェクトを作成するため）、infoboxは技術的にはまだ存在します。これは、マウスが目に見えない "infobox"領域の上を移動するとき、ホバリング効果が発生する、私の問題が発生するところです。私が望んでいたのは、マウスポインタが "infoimg" divの上にあるときだけホバリング効果を開始することでした。私は、エリアを制限しようとするには、次のコードを適用しようとしましたが、それはうまくいきませんでした：あなたが見ることができるように https://jsfiddle.net/x9h5rqdw/

：

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

は、ここに私の問題が何であるかのライブデモンストレーションのためのJSFiddleリンクですマウスが "infoimg"の横にある空の領域（infobox）の上にあるとき、ホバー効果が開始されます。

Answer 1

それは非常に簡単です。 あなたは追加する必要がありvisibility: hidden;と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;が最も簡単な方法ですが、それは、クロスブラウザではありません。 http://caniuse.com/#feat=pointer-events

の作業例：魅力のように働いたhttps://jsfiddle.net/x9h5rqdw/4/

Answer 2

pointer-events: noneを.infoboxに設定すると、その動作を修正できます。

CSSプロパティのpointer-eventsを使用すると、特定のグラフィック要素がマウスイベントのターゲットになる可能性のある環境（存在する場合）を制御できます。このプロパティが指定されていない場合、visiblePainted値と同じ特性がSVGコンテンツに適用されます。

出典：https://developer.mozilla.org/en/docs/Web/CSS/pointer-events