Question

您好我想在我将鼠标悬停在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

使用此代码，它仍无效。

谢谢！

Answer 1

首先，您缺少.来定位课程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');
});

Answer 2

<script>
 $(document).ready(function(){
   $("#ElementToTriggerHover").hover(function(){
      $("#ElementToSwitchClass").toggleClass("TheClassYouWantToToggle");
   });
 });
</script>

Answer 3

首先，你已经为你的＆lt;添加了三个类。我＆gt;不要输入框和

第二，你一次使用它们似乎代表一个层次结构，所以我认为使用它们中的任何一个就足够了。

也可以使用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; }

Answer 4

您的查询缺失了。在开始。确保在DOM加载后执行此操作，并且正确地在页面上加载jQuery。

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

编辑：样机，但有动画（不显示/隐藏）： http://jsfiddle.net/v4FSh/

Answer 5

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

我使用hover和transition制作了一个简单的 Fiddle 。

看一看。也许有帮助。

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

5 个答案: