如果你把光标放在文本框上,图标应该变成一台电脑(我上传的图片),如果你把光标放在蓝光背景之外,它应该变成一架飞机。
我不知道怎么做。
$(".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">
aasdfas
<span class="delete-tag" title="remove this tag"></span>
</span>
<span class="post-tag">
basdfasdf
<span class="delete-tag" title="remove this tag"></span>
</span>
<span class="post-tag">
basdfasdf
<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 个后置标签,而我只想删除一个,而不是全部。
谢谢!
最佳答案
如果您希望在将鼠标悬停在 .post-tag
元素上时图标发生变化,请使用以下 css:
.post-tag:hover .delete-tag,
.post-tag:active .delete-tag {
background-image: url("https://cdn0.iconfinder.com/data/icons/gcons-2/24/silhouette5-16.png"), none;
background-size: initial;
}
编辑
$(".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;
}
.post-tag:hover .delete-tag, /* edit */
.delete-tag-active {
background-image: url("https://cdn0.iconfinder.com/data/icons/gcons-2/24/laptop1-16.png"), none;
background-size: initial;
}
.post-tag:hover .delete-tag:hover, /* edit */
.delete-tag {
background-image: url('https://cdn0.iconfinder.com/data/icons/gcons-2/24/silhouette5-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">
aasdfas
<span class="delete-tag" title="remove this tag"></span>
</span>
<span class="post-tag">
basdfasdf
<span class="delete-tag" title="remove this tag"></span>
</span>
<span class="post-tag">
basdfasdf
<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" />
关于jquery - 更改图标图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32081641/