0

その前のリンクにカーソルを合わせたときにポップアップしたい div があります。ホバーはうまく機能しますが、div 内にリンクがあり、人々がクリックできるように表示されますが、そこに行こうとすると消えます。

ここにjsfiddleがあります

ここでは CSS のみを使用しようとしていますが、jquery などが必要な場合はクールです。

#soldoutinfo a {                                        
    padding:4px 2px;
    font-size:10px;
}

#soldoutinfo, .soldout {                                        
    display:inline;
}

#soldoutinfo a {                                    
    color:#cc0000;
}

#soldoutinfo a:visited {                            
    color:#cc0000;
}

#soldoutinfo + div {                                    
    display:none;
    width:0;
    height:0;
    position:absolute;
}

#soldoutinfo:hover + div {                          
    display:block;
    height:60px;
    width:250px;
    background:#ffffff;
    box-shadow: 0 0 4px #888888;
    position: absolute;
    padding: 8px;
    top: 19px;
    left:12px;
    z-index:1000;
}

#soldoutinfo + div p {                          
    font-size:12px;
}

<p id="soldoutinfo">
    <sup><a>?</a></sup>
</p>
<div>
<p>Hope is not lost! <a href="#">Send us a message</a> and we will see if our stores have any in stock to ship to you.
</p>
</div>
4

4 に答える 4

1

問題は、アンカーの後の要素にホバー効果があることです。したがって、アンカーを離れると、ホバー効果が終了します。

最もクリーンな解決策ではありませんが、次のように修正できます。ツールチップをアンカー内に設定します。span 

<p id="soldoutinfo">
    <sup><a>?</a></sup>
    <span>Hope is not lost! <a href="#">Send us a message</a> and we will see if our stores have any in stock to ship to you.</span>
</p>

#soldoutinfo span {                                 
    display:none;
    width:0;
    height:0;
    position:absolute;
}

#soldoutinfo:hover span {                           
    display:block;
    height:60px;
    width:250px;
    background:#ffffff;
    box-shadow: 0 0 4px #888888;
    position: absolute;
    padding: 8px;
    top: 19px;
    left:12px;
    z-index:1000;
}

JSFiddle DEMO

于 2013-07-18T06:21:08.917 に答える
1

フィドルを編集しました: http://jsfiddle.net/s8QWY/6/

これがうまくいくかどうかを確認してください。基本的に私がしたことはこれでした：

  1. 非表示の div を、表示するためにホバーする必要がある div 内に配置します。
  2. 親divの位置を相対的にする

  3. 表示されている div の位置をホバーした要素の上に配置して、div 自体にカーソルを合わせたときに div が引き続き表示されるようにします。

    <div id="soldoutinfo"><sup><a>?</a><div><p>Hope is not lost! <a href="#">Send us a message</a> and we will see if our stores have any in stock to ship to you.</p></div></sup></div>


#soldoutinfo a {                                        
    padding:4px 2px;
    font-size:10px;
}

#soldoutinfo, .soldout {                                        
    display:inline;
    position: relative;
}

#soldoutinfo a {                                    
    color:#cc0000;
}

#soldoutinfo a:visited {                            
    color:#cc0000;
}

#soldoutinfo div {                                  
    display:none;
    width:0;
    height:0;
    position:absolute;
}

#soldoutinfo:hover div,
#soldoutinfo div:hover {                            
    display:block;
    height:60px;
    width:250px;
    background:#ffffff;
    box-shadow: 0 0 4px #888888;
    position: absolute;
    padding: 8px;
    top: 3px;
    left:3px;
    z-index:1000;
}

#soldoutinfo + div p {                          
    font-size:12px;
}
于 2013-07-18T06:26:03.813 に答える
0

このフィドルには JS コードがありません。理由はわかりません。しかし、あなたへの解決策はsetTimeout();、ボックスを非表示にする必要があるホバー後の期間を指定できるこの関数で使用することです。hide()パラメータ「slow」に追加することもできます。

Jquery UI ToolTipである既製のソリューションを使用することもできます

于 2013-07-18T06:17:23.313 に答える
0

ここにアプローチポイントがあります：

ホバーすると?

$("#id").hover(function(){
   $(this).find("#toShow").show();
}

そして彼が去るとき#toShow

$('#toShow').mouseout(function() {
   $('#toShow').hide();
});
于 2013-07-18T06:13:26.983 に答える