jquery - 更改图标图片

Question

如果你把光标放在文本框上，图标应该变成一台电脑(我上传的图片)，如果你把光标放在蓝光背景之外，它应该变成一架飞机。

我不知道怎么做。

$(".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 个后置标签，而我只想删除一个，而不是全部。

谢谢!

https://jsfiddle.net/nfsqoazq/2/

Answer 1

如果您希望在将鼠标悬停在 .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" />