Вопрос по dom, html, bookmarklet, javascript, highlight – выделите элемент DOM при наведении курсора мыши, как делает осмотр

10

У нас есть букмарклет, и пользователь нажимает кнопку, и нужно нажать кнопку осмотра, например, подсвечник. Мы хотим, чтобы это было кроссбраузерно.

Для этого нам нужно обнаружить элемент DOM во время перемещения мыши, и как только мы получим этот элемент, нам нужно выделить его с помощью CSS.

У нас есть проблемы с обнаружением элемента DOM движением мыши. Можете ли вы рассказать нам, как это сделать?

Когда у нас есть этот элемент DOM, по щелчку пользователя нам нужно извлечь XPath.

Мы нашли, как извлечь XPath тега, см. Мои другие вопросы. Ionut Flavius Pogacian
Я исправляю это. Ionut Flavius Pogacian
Вы пытались что-нибудь еще? У тебя есть какой-нибудь код? Mike Sav

Ваш Ответ

2   ответа
4

$('*').hover(
    function(e){
        $(this).css('border', '1px solid black');
        e.preventDefault();
        e.stopPropagation();
        return false;
    },function(e){
        $(this).css('border', 'none');
        e.preventDefault();
        e.stopPropagation();
        return false;
    }
);

С этим кодом в вашей закладке вы можете загрузить любой код

javascript:function loadScript(src){f=document.createElement('script');if(f){f.setAttribute("type","text/javascript");f.setAttribute("src",src);document.getElementsByTagName("head")[0].appendChild(f);}};loadScript("yourscripturl");
Я просто редактирую свой ответ, вы можете использовать код букмарклета для загрузки кода biget, который может содержать jquery и делать все, что вы хотите
менятьyourscripturl в конце
Вы случайно не знаете, как это сделать с простым JavaScript? Немного проблематично загрузить JQuery в букмарклет. Ionut Flavius Pogacian
21

mousemove наdocument или жеdocument.bodyзатем используйтеtarget Свойство объекта события, чтобы узнать самый верхний элемент, над которым находится мышь. Тогда применить CSS к нему, вероятно, проще всего, добавив в него класс.

Но мне интересно, если:hover psuedo-class может избавить вас от неприятностей ...

Если не использовать:hoverВот пример:

(function() {
  var prev;

  if (document.body.addEventListener) {
    document.body.addEventListener('mouseover', handler, false);
  }
  else if (document.body.attachEvent) {
    document.body.attachEvent('mouseover', function(e) {
      return handler(e || window.event);
    });
  }
  else {
    document.body.onmouseover = handler;
  }

  function handler(event) {
    if (event.target === document.body ||
        (prev && prev === event.target)) {
      return;
    }
    if (prev) {
      prev.className = prev.className.replace(/\bhighlight\b/, '');
      prev = undefined;
    }
    if (event.target) {
      prev = event.target;
      prev.className += " highlight";
    }
  }

})();

Живая копия | источник

Это действительно полезно, но мне нужно, чтобы iframe внутри не работала. Пожалуйста, помогите кому-нибудь.
@Esailija и T.J.Crowder, пожалуйста, проверьте этот связанный вопросMouseover event doesn't granulate on IE9 for sub elements, event doesn't start on IE8
Это: класс hover работает для любого элемента HTML dom? И работает ли в каждом браузере? Знаете ли вы, поддерживается ли это более старой версией, такой как FF 3.5 и IE7? Ionut Flavius Pogacian
Вот jsfiddle, который может показать что-то подобноеjsfiddle.net/MBujm Игнорируйте jQuery, он не нужен.
@IonutFlaviusPogacian::hover действительно работает с любым элементом в IE7 или выше (не в IE6, который поддерживал его только на якорях). Но мне нужно тщательно подумать о том, как структурировать CSS. Простоbody *:hover { ... } вероятно, не будет делать это, если вы хотите выделить толькоtopmost элемент мыши закончен ...

Похожие вопросы