javascript - 在悬停事件处理程序上添加类

Question

有一个提交按钮。和一个文本框。我想将鼠标悬停在带有 classname: search 的 button 上，然后将类切换到我的 textbox。 问题是当我想在文本框中输入内容时它不起作用。我怎样才能解决这个问题？ 这是我的代码:

$(".search").hover(function () {
    $(".searchinput").toggleClass("searchinput2");
 });

.searchinput{width:2%; height:30px; background:yellow; font-size:1.5em;}
.searchinput2{width:50% !important;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" class="searchinput"/>
        <button type="submit" class="search">search</button>

Answer 1

您应该使用 .mouseenter 和 .mouseleave 事件。

$(".search").mouseenter(function () {
    $("#searchinput").addClass('searchinput2');
 });
$(".searchinput").mouseleave(function () {
    $("#searchinput").removeClass('searchinput2');
 });

.searchinput{width:2%; height:30px; background:yellow; font-size:1.5em;}
.searchinput2{width:50% !important;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" class="searchinput" id="searchinput"/>
        <button type="submit" class="search">search</button>

您可以为 input 元素绑定(bind) .hover() 事件处理程序。

$(".searchinput").hover(function () {
    $(".searchinput").toggleClass('searchinput2');
});

.searchinput{width:2%; height:30px; background:yellow; font-size:1.5em;}
.searchinput2{width:50% !important;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" class="searchinput"/>
        <button type="submit" class="search">search</button>