Затенить всю страницу, отменить выделение элементов при наведении - PullRequest
Новая
       5

Затенить всю страницу, отменить выделение элементов при наведении

0 голосов
/ 13 января 2011

Я пытаюсь создать инструмент для проверки страниц, где:

  • Вся страница затенена
  • Перекрытые элементы не заштрихованы.

В отличие от приложения типа лайтбокса (которое аналогично), элементы поиска должны оставаться на месте и (в идеале) не должны дублироваться.

Изначально, глядя на реализации лайтбокса изображения, я подумал о том, чтобы добавить к документу оверлей, а затем навести курсор на z-индекс элементов при наведении.Однако этот метод не работает в этом случае, так как оверлей блокирует дополнительные зависания мыши: 

$(function() {
    window.alert('started');
    $('<div id="overlay" />').hide().appendTo('body').fadeIn('slow');


    $("p").hover(
        function () {
            $(this).css( {"z-index":5} );
        }, 
        function () {
            $(this).css( {"z-index":0} );
        }
    );

В качестве альтернативы, JQueryTools имеет инструмент 'expose' и 'mask', который я пробовал с помощью кода ниже:

$(function() {
    $("a").click(function() {
         alert("Hello world!");
    });

    // Mask whole page
    $(document).mask("#222");

    // Mask and expose on however / unhover 
    $("p").hover(
        function () {
            $(this).expose();
        }, 
        function () {
            $(this).mask();
        }
    );

});

Наведение не работает, если я не отключил начальную маскировку страницы.Есть какие-нибудь мысли о том, как лучше всего этого достичь, используя простой JQuery, инструменты JQuery и другие методы?Спасибо!

Ответы [ 2 ]

2 голосов
/ 13 января 2011

Что вы можете сделать, это сделать копию элемента и вставить его обратно в DOM вне вашего оверлея (с более высоким z-индексом).Вам нужно рассчитать его положение, чтобы сделать это, но это не так уж сложно.

Вот рабочий пример .

При написании этого я заново изучилтот факт, что что-то с нулевой непрозрачностью не может вызвать событие.Поэтому вы не можете использовать .fade (), вам нужно специально установить непрозрачность на ненулевое, но очень маленькое число. 

$(document).ready(function() { init() })

function init() {
    $('.overlay').show()
    $('.available').each(function() {
       var newDiv = $('<div>').appendTo('body');
       var myPos = $(this).position()  
       newDiv.addClass('available')
       newDiv.addClass('peek')
       newDiv.addClass('demoBorder')                
       newDiv.css('top',myPos.top+'px')
       newDiv.css('left',myPos.left+'px')
       newDiv.css('height',$(this).height()+'px')
       newDiv.css('width',$(this).width()+'px')  
       newDiv.hover(function()
          {newDiv.addClass('full');newDiv.stop();newDiv.fadeTo('fast',.9)},function()
          {newDiv.removeClass('full');newDiv.fadeTo('fast',.1)})   
    })  
}
1 голос
/ 13 января 2011

Извините за синтаксис прототипа, но это может дать вам хорошую идею. 

function overlay() {
  var div = document.createElement('div');
  div.setStyle({
    position: "absolute",
    left: "0px",
    right: "0px",
    top: "0px",
    bottom: "0px",
    backgroundColor: "#000000",
    opacity: "0.2",
    zIndex: "20"
  })
  div.setAttribute('id','over');
  $('body').insert(div);
}

$(document).observe('mousemove', function(e) {
  var left = e.clientX,
      top = e.clientY,
      ele = document.elementFromPoint(left,top);
      //from here you can create that empty div and insert this element in there
})

overlay();
...