灰色十字/紅色十字刪除文字

我想添加到我的網站清除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

灰色十字/紅色十字刪除文字

回答

相關問題