2015-08-18 191 views
0

如果將光標放在文本框上,該圖標應該更改爲計算機(我已上傳的圖片),如果光標位於藍色背景之外,則應將其轉換爲飛機。更改圖標圖片

我不知道該怎麼做。

$(".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/

+0

在懸停聲明之前放置默認背景聲明。一般來說,你的CSS一團糟。所有默認的東西應該在第一個塊(爲什麼.delete-tag列出兩次並覆蓋本身)? –

+0

我需要做一個保理 –

回答

0

如果你想要的圖標變化,當你將鼠標懸停在.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"> 
 
\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" />

+0

您是否嘗試過源代碼? –

+0

是的,我試過了。我看到,當我將圖標懸停時,圖標會發生變化,但是當我將鼠標懸停在文本上時,什麼也沒有發生。當你將文字懸停時,你想要改變圖標,對嗎?還是我誤解了你的問題? –

+0

「你想讓圖標在你懸停文字時改變,對吧?」文字和框除了圖標(+符號)。 –