Adding class on hover event handler

Question

There is a submit button. and a textbox. I would like to hover on button with classname: search ,then toggle class to my textbox. the problem is it is not work when I want to type in my textbox. How can I fix this? Here is my codes:

$(".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>

Mihai Alexandru-Ionut · Accepted Answer · 2017-01-28 08:32:21Z

2

You should use .mouseenter and .mouseleave events.

$(".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>

You can bind .hover() event handler for input element.

$(".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>

edited Jan 28, 2017 at 8:32

answered Jan 28, 2017 at 8:07

Mihai Alexandru-Ionut

48.6k14 gold badges106 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

inaz Over a year ago

i would like to use this code with hover not click event

Abhi Over a year ago

Although this solution works. But, I don't understand why it didn't with hover. As the doc says: The .hover() method binds handlers for both mouseenter and mouseleave events.

inaz Over a year ago

@Alexandru-IonutMihai Thank you so much.

Mihai Alexandru-Ionut Over a year ago

@Abhi, because hover is applied for button element and that's the reson for appearing this behavior. View updated answer.

Collectives™ on Stack Overflow

Adding class on hover event handler

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related