jquery - 灰十字/红十字删除文本

我想在我的网站上添加清除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中？
谢谢

例如，这些图像：
鼠标悬停时为黑色，否则悬停为灰色。

最佳答案

将图像放在CSS中：

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

[编辑]

OP还询问如何使其成为链接，以便它与JQuery一起使用。

它不一定需要是link元素（即<a>标记）才能使用JQuery。它可以是任何HTML元素。您只需要使用JQuery在其上放置click事件：

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

但是，从语义上讲，最好使用适合其将要执行的操作的元素类型，因此我建议将其设置为<button>或类似名称。但是，无论是<button>还是<div>或其他任何东西，JQuery代码都是相同的。

会有所帮助的。

关于jquery - 灰十字/红十字删除文本，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/5978869/