Javascript 在另一个元素悬停时切换搜索输入类

您好，当我将鼠标悬停在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") });
});

$（文档）.ready（函数（）{
$（“.fa.fa搜索加.fa lg”）。悬停(
函数（）{$（“.search box hidden”）.toggleClass（“search box show”）}；
});

我编辑了我的代码。基本上，当我将鼠标悬停在FontAWESOME的图标上时，它会触发显示搜索框的类，当我离开搜索框时，它会返回到隐藏类

像这样：

有了这段代码，它仍然不起作用

---

谢谢

首先，您缺少目标类

的
，它应该是：

$(".fa.fa-search-plus.fa-lg").hover(
// ^ here ----

其次，如果您只想将图标的前一个同级对象
输入作为目标，请使用：

$(".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');
});


$（文档）.ready（函数（）{
$（“#ElementToTriggerHover”）.hover（函数（）{
$（“#element to switch class”）.toggleClass（“您想切换的类”）；
});
});
首先，您已将三个类添加到您的非输入框和

第二，您同时使用所有它们似乎代表了一个层次结构，所以我认为使用其中任何一个就足够了

使用
toggleClass
，而不是在行中添加然后删除

html:

  <li>
     <input id="search" type="text" class="hidden" placeholder="Enter Your 
      Keywords...">
     <i class="fa fa-search-plus fa-lg"></i>
  </li>

或

只需使用css
：鼠标悬停
选择器即可

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

编辑：
实体模型，但带有动画（不显示/隐藏）：
您可以使用CSS实现这一点

我使用
悬停
和
转换
做了一个简单的操作

看一看。可能会有帮助。
那么问题出在哪里也许
$（“fa.fa search plus.fa lg”）
应该是
$（“.fa.fa search plus.fa lg”）
。。。缺少选择器中的第一个“.”是否要在第一次悬停时添加类，然后在第二次悬停时删除，依此类推？或者只是把它切换到悬停状态？@ArunPJohny不是working@Ted我错过了！我添加了，但仍然不起作用。仍然需要在选择器中的“fa”前面加“.”
.fa-search-plus:hover{
    background-color:yellow;
} 

$(function() {
    $(".fa.fa-search-plus.fa-lg").hover(
       function(){ 
           $(".hidden").addClass("search-box");
       },
       function(){ 
           $(".hidden").removeClass("search-box");
       }
    );
});