[英]Toggle class of search input on hover of another element
嗨,當我將鼠標懸停在i元素上時,我想在搜索框中添加一個類,然后將鼠標懸停在該元素上時刪除添加的類。
<li><input id="search" type="text" class="search-box-hidden" placeholder="Enter Your Keywords..."> <i class="fa fa-search-plus fa-lg"></i></li>
$(document).ready(function(){
$(".fa.fa-search-plus.fa-lg").hover(
function(){ $(".search-box-hidden").toggleClass("search-box-shown") });
});
我編輯了代碼。 基本上,當我將鼠標懸停在Font Awesome上的圖標上時,它將觸發顯示搜索框的類,當我將鼠標移出搜索框時,它將返回到隱藏的類。
像這樣: http : //s27.postimg.org/pq2zeetw3/preview.jpg
使用此代碼,它仍然不起作用。
謝謝!
首先,您不見了.
以fa
為目標,應該是:
$(".fa.fa-search-plus.fa-lg").hover(
// ^ here ----
其次,如果只想定位input
即圖標的前一個兄弟),則使用:
$(".fa.fa-search-plus.fa-lg").hover(
function () {
$(this).prev().addClass("search-box")
},
function () {
$(this).prev().removeClass("search-box")
})
或者您可以使用toggleClass()
代替在此處添加和刪除:
$("fa.fa-search-plus.fa-lg").hover(function() {
$(this).prev().toggleClass('search-box');
});
<script>
$(document).ready(function(){
$("#ElementToTriggerHover").hover(function(){
$("#ElementToSwitchClass").toggleClass("TheClassYouWantToToggle");
});
});
</script>
首先,您在<i>中添加了三個類,不要輸入框,然后
第二,您一次使用所有它們似乎代表一個層次結構,因此我認為使用其中任何一個就足夠了。
還可以使用toggleClass
代替在行中添加然后刪除。
html:
<li>
<input id="search" type="text" class="hidden" placeholder="Enter Your
Keywords...">
<i class="fa fa-search-plus fa-lg"></i>
</li>
JS:
$(".fa-search-plus").hover(
function(){ $(".hidden").toggleClass("search-box") });
要么
只是簡單地使用css :hover
選擇器作為
.fa-search-plus:hover{
background-color:yellow;
}
您的查詢缺少。 一開始。 確保在DOM加載后執行此操作,並且正確在頁面上加載了jQuery。
$(function() {
$(".fa.fa-search-plus.fa-lg").hover(
function(){
$(".hidden").addClass("search-box");
},
function(){
$(".hidden").removeClass("search-box");
}
);
});
編輯:樣機,但帶有動畫(不顯示/隱藏): http : //jsfiddle.net/v4FSh/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.