更改图标图片

Question

如果您将光标放在文本框上，则图标应更改为计算机（我上传的图片），如果光标位于蓝光背景之外，则应将其变为飞机。

我不知道该怎么做。

＆＃13;

＆＃13;

$(".delete-tag").click(function() {

  $(this).parent().remove();

});

＆＃13;

.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;
}

＆＃13;

<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" />

＆＃13;

＆＃13;

＆＃13;

请注意您有很多贴标签。如果你有3个后贴标签，我想只删除一个，而不是全部。

谢谢！

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

Answer 1

如果您希望在悬停<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="columns-container"> <div class="left-column"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos, natus doloribus modi molestiae, sed facilis corporis voluptatum similique, tempora excepturi in illum aut quam tenetur corrupti sequi dolore fuga ab.</p> <p>Doloremque beatae deleniti consequatur dolorem aliquam, amet saepe optio, maiores asperiores commodi nostrum quisquam vero ad est aspernatur odit eligendi repudiandae, facilis illum obcaecati ullam assumenda corporis. Iure, fuga delectus.</p> <p>Excepturi similique harum suscipit itaque iusto rem animi vero libero. Consequuntur, fuga, sed tempore ad reprehenderit illum officiis laborum nemo consectetur iste ducimus, nam saepe maxime. Reprehenderit ipsum esse, dolor!</p> <p>Id, pariatur dicta quisquam harum accusantium officia enim laudantium aliquid maiores soluta dolore exercitationem omnis debitis vel. Deleniti fugiat delectus eum, quaerat repellat, atque molestiae incidunt, aspernatur, tempora sequi reiciendis.</p> <p>Dolor, praesentium. Eos reprehenderit officiis eligendi, expedita tempora sint aliquid cumque vitae natus eius consequatur, quas nostrum similique autem quae in quos error animi? Laboriosam blanditiis quia sunt delectus, iusto.</p> <p>Veritatis provident ratione placeat aspernatur molestias temporibus. Quibusdam quaerat dignissimos, ullam laudantium incidunt voluptates ea laboriosam. Dolore necessitatibus rem a corporis pariatur assumenda nesciunt, veritatis quae quasi amet? Repudiandae, dolor.</p> <p>Possimus dignissimos illo qui eaque, porro quis. Quos voluptatibus inventore incidunt tempora nesciunt voluptas nihil aspernatur tempore laudantium, sunt eos recusandae nostrum ipsa repellendus molestias, blanditiis error illum! Veniam, voluptatibus?</p> <p>Assumenda nulla earum voluptas vero distinctio officia nobis laudantium quae. Voluptas, earum porro laborum autem, iure commodi repellendus esse, iusto perferendis numquam fugiat aperiam nesciunt. Hic eius ea quod, minima?</p> <p>Aliquid vitae facilis nisi, rerum nihil quo similique illo eveniet pariatur eaque repudiandae sed, aliquam nostrum assumenda, officiis quasi eius laudantium, accusantium ut. Tenetur laboriosam, illo in, consequatur aliquid odio?</p> <p>Reprehenderit alias saepe quae nostrum, quasi quaerat maiores. Illum, libero distinctio iusto, ab laudantium repudiandae necessitatibus voluptas magni eligendi suscipit placeat nobis vel veritatis? Perspiciatis facilis eligendi voluptas tenetur. Dolorum!</p> </div> <div class="right-column"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos, natus doloribus modi molestiae, sed facilis corporis voluptatum similique, tempora excepturi in illum aut quam tenetur corrupti sequi dolore fuga ab.</p> <p>Doloremque beatae deleniti consequatur dolorem aliquam, amet saepe optio, maiores asperiores commodi nostrum quisquam vero ad est aspernatur odit eligendi repudiandae, facilis illum obcaecati ullam assumenda corporis. Iure, fuga delectus.</p> <p>Excepturi similique harum suscipit itaque iusto rem animi vero libero. Consequuntur, fuga, sed tempore ad reprehenderit illum officiis laborum nemo consectetur iste ducimus, nam saepe maxime. Reprehenderit ipsum esse, dolor!</p> <p>Id, pariatur dicta quisquam harum accusantium officia enim laudantium aliquid maiores soluta dolore exercitationem omnis debitis vel. Deleniti fugiat delectus eum, quaerat repellat, atque molestiae incidunt, aspernatur, tempora sequi reiciendis.</p> <p>Dolor, praesentium. Eos reprehenderit officiis eligendi, expedita tempora sint aliquid cumque vitae natus eius consequatur, quas nostrum similique autem quae in quos error animi? Laboriosam blanditiis quia sunt delectus, iusto.</p> <p>Veritatis provident ratione placeat aspernatur molestias temporibus. Quibusdam quaerat dignissimos, ullam laudantium incidunt voluptates ea laboriosam. Dolore necessitatibus rem a corporis pariatur assumenda nesciunt, veritatis quae quasi amet? Repudiandae, dolor.</p> <p>Possimus dignissimos illo qui eaque, porro quis. Quos voluptatibus inventore incidunt tempora nesciunt voluptas nihil aspernatur tempore laudantium, sunt eos recusandae nostrum ipsa repellendus molestias, blanditiis error illum! Veniam, voluptatibus?</p> <p>Assumenda nulla earum voluptas vero distinctio officia nobis laudantium quae. Voluptas, earum porro laborum autem, iure commodi repellendus esse, iusto perferendis numquam fugiat aperiam nesciunt. Hic eius ea quod, minima?</p> <p>Aliquid vitae facilis nisi, rerum nihil quo similique illo eveniet pariatur eaque repudiandae sed, aliquam nostrum assumenda, officiis quasi eius laudantium, accusantium ut. Tenetur laboriosam, illo in, consequatur aliquid odio?</p> <p>Reprehenderit alias saepe quae nostrum, quasi quaerat maiores. Illum, libero distinctio iusto, ab laudantium repudiandae necessitatibus voluptas magni eligendi suscipit placeat nobis vel veritatis? Perspiciatis facilis eligendi voluptas tenetur. Dolorum!</p> </div> </div>元素时更改图标，请使用以下css：

.post-tag

修改

＆＃13;

＆＃13;

.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;
}

＆＃13;

$(".delete-tag").click(function() {

  $(this).parent().remove();

});

＆＃13;

.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;
}

＆＃13;

＆＃13;

＆＃13;