リスト内のアイテムにマウスオーバーすると、Superfish を使用してポップアップ ツールチップが表示されますが、これはうまく機能しますが、ポップアップ div を使用すると、その下にある他のアイテムが、基になるリストアイテムの上にマウスを移動したときにポップアップをトリガーできます。
つまり、ポップアップは不透明に見えますが、不透明な div のようには機能しません。これは、ポップアップが消える前に、その下にあるアイテムが引き続きイベントをトリガーできるようにするためです。
z-index を 9999 に設定して、他の何よりも div の位置を確保していますが、ソリッド/不透明な div のようには機能しません。
私は何が欠けていますか？不透明度の設定は視覚的な不透明度以上に影響しますか?
これは、マウスオーバー時にバブル ポップアップを呼び出す jQuery 関数です。
function Popup(){
//create a bubble popup for each DOM element with class attribute as "text", "button" or "link" and LI, P, IMG elements.
$('.text, .button, .link').CreateBubblePopup({
selectable: true,
position : 'top',
align : 'center',
innerHtml: '<img src="/images/loading.gif" alt="Loading" style="border:0px; vertical-align:middle; margin-right:10px; display:inline-block;" /><span>loading!</span>',
innerHtmlStyle: {
//color:'#FFFFFF',
'text-align':'left',
'z-index':'9999',
'width':'500px'
},
themeName: 'blue', //'all-black',
themePath: '/jquerybubblepopup-theme'
});
// add a mouseover event for the "link" element...
$('.link').mouseover(function(){
//get a reference object for "this" target element
var link = $(this);
//load data asynchronously when mouse is over...
$.ajax({
url: '/bodytext.php?id=' + this.id,
type: 'GET',
cache: false,
success: function(data) {
var seconds_to_wait = 0;
function pause(){
var timer = setTimeout(function(){
seconds_to_wait--;
if(seconds_to_wait > 0){
pause();
}else{
//set new innerHtml for the Bubble Popup
link.SetBubblePopupInnerHtml(data, false); //false -> it shows new innerHtml but doesn't save it, then the script is forced to load everytime the innerHtml...
// take a look in documentation for SetBubblePopupInnerHtml() method
//$('.link').SetBubblePopupOptions(selectable, true);
};
},500);
};pause();
}
});
}); //end mouseover event
}