Question

有一个submit按钮。和textbox。我想将button悬停在classname: search上，然后将课程切换到我的textbox。问题是当我想输入我的文本框时它不起作用。我怎样才能解决这个问题？这是我的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

您应该使用.mouseenter和.mouseleave个活动。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: