我正在尝试勾勒出悬停的顶级元素。
$(function()
{
var ElementSelector = null;
var SelectedElement = null;
$("*:not(div#ElementSelector)").hover
(
function()
{
SelectedElement = ($(this).length > 1 ? $(this).find("*:last") : $(this));
if(ElementSelector != null)
{
ElementSelector.css("width", SelectedElement.width()).css("height", SelectedElement.height())
.css("left", SelectedElement.offset().left).css("top", SelectedElement.offset().top)
.css("marginTop", SelectedElement.css("marginTop")).css("marginLeft", SelectedElement.css("marginLeft"))
.css("marginRight", SelectedElement.css("marginRight")).css("marginBottom", SelectedElement.css("marginBottom"))
.css("paddingLeft", SelectedElement.css("paddingLeft")).css("paddingTop", SelectedElement.css("paddingTop"))
.css("paddingRight", SelectedElement.css("paddingRight")).css("paddingBottom", SelectedElement.css("paddingBottom"));
}
SelectedElement.click(function()
{
SelectedElement.css("background-color", "green");
});
},
function ()
{
SelectedElement.unbind("click");
}
);
$("body").append("<div id='ElementSelector' style='width:0px;height:0px;z-index: 100000;position:absolute;border: 2px solid red;padding:0px;margin:0px;margin:0px;'></div>");
ElementSelector = $("div#ElementSelector");
});
这是我到目前为止所提出的......但它有很多错误!那么任何想法?
答案 0 :(得分:1)
为什么不使用CSS和jQuery的addClass,removeClass和toggleClass函数,而不是指定代码中的所有样式?这应该会清理你的代码并将演示文稿放在它所属的位置 - 在样式表中。
答案 1 :(得分:1)
您可以随时使用.hover?
我会建议清理你的代码并做Mark所说的并将样式放在样式表中。只有在使用jQuery时它才有意义,它可能会变得非常混乱。
如果您第一次以正确的方式完成它,那么测试代码会更容易,并且您将有更好的基础开始,实际上您的“测试”可能会成为最终产品。
整个附加内容没有任何意义,为什么不使用jQuery's CSS functions设置它?这就是他们的目的。