簡體   English   中英

在另一個元素懸停時切換搜索輸入的類

[英]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/

您可以使用CSS進行此操作。

我使用hovertransition做了一個簡單的小提琴

看一看。 也許有幫助。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM