如果將光標放在文本框上,該圖標應該更改爲計算機(我已上傳的圖片),如果光標位於藍色背景之外,則應將其轉換爲飛機。更改圖標圖片
我不知道該怎麼做。
$(".delete-tag").click(function() {
$(this).parent().remove();
});
.delete-tag {
width: 14px;
height: 14px;
vertical-align: middle;
display: inline-block;
cursor: pointer;
margin-left: 3px;
margin-top: 1px;
margin-bottom: -1px;
}
.delete-tag:hover,
.delete-tag-active {
background-image: url("https://cdn0.iconfinder.com/data/icons/gcons-2/24/silhouette5-16.png"), none;
background-size: initial;
}
.delete-tag {
background-image: url('https://cdn0.iconfinder.com/data/icons/gcons-2/22/airplane1-16.png');
margin-top: 0;
margin-bottom: 0;
}
.post-tag {
text-decoration: none;
text-align: center;
line-height: 1;
color: #3e6d8e;
font-size: 12px;
white-space: nowrap;
background: #e4edf4;
border: 1px solid #e4edf4;
display: inline-block;
border-radius: 0;
-webkit-transition: color .15s ease, background .15s ease, border .15s ease;
-moz-transition: color .15s ease, background .15s ease, border .15s ease;
-ms-transition: color .15s ease, background .15s ease, border .15s ease;
-o-transition: color .15s ease, background .15s ease, border .15s ease;
margin: 2px 2px 2px 0;
padding: .4em .5em;
}
.post-tag:hover {
text-decoration: none;
color: #3e6d8e;
background-color: #dae6ef;
border: 1px solid #dae6ef;
background-color: #DAE6EF;
}
<span class="post-tag">
\t aasdfas
\t <span class="delete-tag" title="remove this tag"></span>
</span>
<span class="post-tag">
\t basdfasdf
\t <span class="delete-tag" title="remove this tag"></span>
</span>
<span class="post-tag">
\t basdfasdf
\t <span class="delete-tag" title="remove this tag"></span>
</span>
<br/>
<br/>
<br/>
<img src="https://cdn0.iconfinder.com/data/icons/gcons-2/24/laptop1-16.png" />
請把你有很多標籤後帳戶。如果您有3個後貼標籤,並且我只想移除其中一個,而不是全部。
謝謝!
https://jsfiddle.net/nfsqoazq/2/
在懸停聲明之前放置默認背景聲明。一般來說,你的CSS一團糟。所有默認的東西應該在第一個塊(爲什麼.delete-tag列出兩次並覆蓋本身)? –
我需要做一個保理 –