')
.css({ 'background-color': 'rgba(255,0,0,.5)', 'position': 'absolute', 'z-index': '65535' })
.appendTo('body');
По сути, я вставляю div в DOM с полупрозрачным фоном. Затем я прослушиваю событие наведения курсора на каждый элемент, а затем перемещаю div так, чтобы он перекрывал этот элемент.
Прямо сейчас это просто заставляет всю страницу краснеть, как только вы наводите указатель мыши на страницу. Как мне сделать так, чтобы это работало лучше?
Изменить: Совершенно очевидно, что проблема в том, что как только моя мышь касается страницы, выделяется тело, а затем, когда я перемещаю указатель мыши, ни один из моментов не проходит через маркер, потому что он находится поверх всего.
Firebug
Покопавшись в исходном коде Firebug, я обнаружил следующее:
drawBoxModel: function(el)
{
// avoid error when the element is not attached a document
if (!el || !el.parentNode)
return;
var box = Firebug.browser.getElementBox(el);
var windowSize = Firebug.browser.getWindowSize();
var scrollPosition = Firebug.browser.getWindowScrollPosition();
// element may be occluded by the chrome, when in frame mode
var offsetHeight = Firebug.chrome.type == "frame" ? FirebugChrome.height : 0;
// if element box is not inside the viewport, don't draw the box model
if (box.top > scrollPosition.top + windowSize.height - offsetHeight ||
box.left > scrollPosition.left + windowSize.width ||
scrollPosition.top > box.top + box.height ||
scrollPosition.left > box.left + box.width )
return;
var top = box.top;
var left = box.left;
var height = box.height;
var width = box.width;
var margin = Firebug.browser.getMeasurementBox(el, "margin");
var padding = Firebug.browser.getMeasurementBox(el, "padding");
var border = Firebug.browser.getMeasurementBox(el, "border");
boxModelStyle.top = top - margin.top + "px";
boxModelStyle.left = left - margin.left + "px";
boxModelStyle.height = height + margin.top + margin.bottom + "px";
boxModelStyle.width = width + margin.left + margin.right + "px";
boxBorderStyle.top = margin.top + "px";
boxBorderStyle.left = margin.left + "px";
boxBorderStyle.height = height + "px";
boxBorderStyle.width = width + "px";
boxPaddingStyle.top = margin.top + border.top + "px";
boxPaddingStyle.left = margin.left + border.left + "px";
boxPaddingStyle.height = height - border.top - border.bottom + "px";
boxPaddingStyle.width = width - border.left - border.right + "px";
boxContentStyle.top = margin.top + border.top + padding.top + "px";
boxContentStyle.left = margin.left + border.left + padding.left + "px";
boxContentStyle.height = height - border.top - padding.top - padding.bottom - border.bottom + "px";
boxContentStyle.width = width - border.left - padding.left - padding.right - border.right + "px";
if (!boxModelVisible) this.showBoxModel();
},
hideBoxModel: function()
{
if (!boxModelVisible) return;
offlineFragment.appendChild(boxModel);
boxModelVisible = false;
},
showBoxModel: function()
{
if (boxModelVisible) return;
if (outlineVisible) this.hideOutline();
Firebug.browser.document.getElementsByTagName("body")[0].appendChild(boxModel);
boxModelVisible = true;
}
Похоже, они используют стандартный div + css для его рисования ... просто нужно выяснить, как они теперь обрабатывают события. .. (этот файл состоит из 28 КБ строк)
Там же есть этот фрагмент, который, я думаю, извлекает соответствующий объект .... хотя я не могу понять, как это сделать. Они ищут класс «objectLink-element» ... и я понятия не имею, что это за «repObject».
onMouseMove: function(event)
{
var target = event.srcElement || event.target;
var object = getAncestorByClass(target, "objectLink-element");
object = object ? object.repObject : null;
if(object && instanceOf(object, "Element") && object.nodeType == 1)
{
if(object != lastHighlightedObject)
{
Firebug.Inspector.drawBoxModel(object);
object = lastHighlightedObject;
}
}
else
Firebug.Inspector.hideBoxModel();
},
I ' Я думаю, что, может быть, когда событие mousemove или mouseover срабатывает для узла подсветки, я могу каким-то образом передать его вместо этого? Может быть, для узла, который он покрывает ...?
Если я помещаю невидимый элемент над каждым элементом с более высоким z-индексом, чем мой маркер, но даю своему маркеру более высокий z-индекс, чем фактические элементы ... теоретически, он должно сработать. Невидимые элементы активируют событие мыши, но эффект выделения будет по-прежнему выглядеть поверх реальных элементов.
Это означает, что я только что удвоил элементы DOM, и расположение должно быть правильным. Если только не , может быть, я только «приподниму» те элементы, которые в данный момент покрывает маркер ?? Но это все равно может быть каждый элемент>.