PopUp окно при наведении курсора мыши

Question

• Моя проблема:

У меня есть требование показа всплывающего окна при наведении курсора мыши на элемент в HTML. Очень важной частью этой реализации является то, что всплывающее окно должно быть видимым даже при наведении самого всплывающего окна.

• пытался реализовать:

Для меня всплывающее окно показывает на парении целевого элемента. Он также отображает зависание всплывающего окна. Но проблема в том, что я могу показать всплывающее окно при наведении всплывающего окна, если оно находится рядом с целевым элементом. Но если я хочу, чтобы всплывающее окно hover было немного больше на расстоянии от целевого элемента, всплывающее окно исчезает, когда я нажимаю на него курсор. Любой орган реализовал этот сценарий?

Я использую jQuery. После кода может быть обозначаемого:

//Catching the mouse over event and showing the hover popup. 
    $("div[id^=RestInformationHolder_div] > a").hover(
     function() { 
      var control = this.id; 
      var POP = this.parentNode.parentNode; 
      var assetType=$("#" + POP.id).attr('_assetType'); 
      fillPopupContent(control, assetType); 
      positionDivToTarget(this); 
      showElement("restRowAnchorPopup"); 
     }, 
     function() { 
      $("#restRowAnchorPopup").hover(
       function() { 
        showElement("restRowAnchorPopup");//"restRowAnchorPopup" is the popup div id. 
       }, 
       function() { 
        hideElement("restRowAnchorPopup"); 
       } 
      ); 
      hideElement("restRowAnchorPopup"); 
     } 
    ); 
} 

function fillPopupContent(targetElementId, assetType) { 
    //Fill the content in the popup div. 
} 

function positionDivToTarget(targetElement) { 
    var posArray = getPositionToBody(targetElement); 
    var offsetLeft = posArray[0] + targetElement.offsetWidth * 1/3; 
    var offsetTop = posArray[1] + targetElement.offsetHeight; 

    $("#restRowAnchorPopup").css({ "top": offsetTop, "left": offsetLeft }); 
} 

function showElement(elementId) { 
    $("#" + elementId).css("display", "block"); 
} 

function hideElement(elementId) { 
    $("#" + elementId).css("display", "none");  
} 

function getPositionToBody(targetHtmlElement) { 
//Returns the relative position of the target element. 
} 

Любая помощь приветствуется.

Спасибо заранее. Subrat.

Answer 1

Лень в данный момент, чтобы закодировать его для вас, но основной идеей является

1. Пользователь парит ваш RestInformationHolder_div элемент
2. Показать restRowAnchorPopup
3. Пользователь оставляет RestInformationHolder_div элемент ->mouseout пожары
4. Вы запускаете таймер с timerid = setTimeout(hidesPopup(), 1000) изменения времени на то, что подходит вам
5. Если пользователь парит всплывающее окно, прежде чем закончится время вы cancelTimeout(timerid)
6. Else hidesPopup() запускается и скрывает всплывающее окно

Вы можете, конечно, Finetune это немного больше и сделать hidesPopup() скрыть всплывающее окно постепенно с «медленным» затуханием непрозрачности, и если пользователи перемещаются, когда он скрывается, вы останавливаете анимацию и устанавливаете непрозрачность.

---

Demopage: http://jsbin.com/apaxa

CODEVIEW из demopage http://jsbin.com/apaxa/edit

Answer 2

Не прямой ответ, но вы можете обрезать эти две функции вниз:

function showElement(elementId) { 
    $("#" + elementId).css("display", "block"); 
} 

function hideElement(elementId) { 
    $("#" + elementId).css("display", "none");  
} 

//just call 
$('#elementId').show(); 

$('#elementId').hide();