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

Question

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

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

Answer 1

将图像放在 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>或类似的东西。但无论是 <button>，JQuery 代码都大同小异。或 <div>或其他任何内容。

希望有帮助。