灰色十字/红色十字删除文字

我想添加到我的网站清除div（删除所有文本）的可能性。 div上左侧的灰色十字，点击时，div被清除。但是当鼠标结束时，就像在stackoverflow.com（在评论中），十字会变成红色。我该怎么做？灰色十字/红色十字删除文字

HTML：

print $cgi->div({-id=>"subheader"},$cgi->span({-id=>"reset"}));

CSS：

#subheader { 
     text-align:center; 
     clear: both; 
     margin: 3px 0 10px 0; 
     height:18px; 
     background: #f4f4f4; 
     color: #808080; 
     border-bottom: 1px solid #ccc; 
} 

#reset { 
     float:left; 
     width:20px; 
     height:20px; 
}

我应该把图像？在CGI或CSS？谢谢

例如与这些图像： close 黑色时鼠标悬停，灰色，如果不是。

来源

2011-05-12 eouti

将来，请注意您的PHP或Perl（或其它）与您的问题无关并且有害。这不是你的HTML。您的HTML就是这样产生的，并且是浏览器所看到的。查看您网页上的来源并复制/粘贴您的_actual_ HTML。 – Phrogz 2011-05-12 13:57:03

放入CSS图像：

#reset { 
    background:url('grey-cross.png'); 
} 
#reset:hover { 
    background:url('red-cross.png'); 
}

[编辑]

OP还要求如何使一个链接，以便它使用jQuery的作品。

它不一定需要链接元素（即<a>标签）才能使用JQuery;它可以是任何HTML元素。你只需要使用jQuery将点击事件到它：

$('#reset').click(function() { ...your code here... }

然而，在语义上，它是最好的，如果你使用的是适当的，将执行的操作元素类型，所以我建议使其成为一个<button>或类似的东西。但JQuery代码与<button>或<div>或其他任何内容相同。

嗨，帮助。

来源

2011-05-12 13:50:25 Spudley

以及如何创建链接，所以当我点击时，jquery删除所有内部HTML？ – eouti 2011-05-12 13:51:29

@eouti - 这是一个额外的问题。我会编辑我的答案... – Spudley 2011-05-12 13:52:50

你也可以把它变成一个精灵来保存加载的对象数量，并且只需在悬停时移动背景位置。 – 2011-05-12 13:59:08

需要在此两件事情：

是检测到点击和删除元素

CSS的文本来改变图像的JavaScript：

#reset{backgroud-image:url('image.jpg');height:20px;width:20px} 
#reset:hover{backgroud-image:url('image2.jpg')}

来源

2011-05-12 13:43:31 cmplieger

但在哪里把标签，所以用jQuery我可以删除#subheader的内部HTML？ – eouti 2011-05-12 13:45:37

@eouti在这里为你编辑它。为js使用类似于

– cmplieger 2011-05-12 13:57:04

@eouti for jquery使用$（'＃subheader'）。empty（） – cmplieger 2011-05-12 14:01:31

灰色十字/红色十字删除文字

回答

相关问题