jQuery hover and click method not working for the same element

jquery hover not working
jquery mouseover mouseout
jquery hover effects on div
jquery mouseover vs hover
jquery hover out
on hover show div jquery demo
jquery hover popup
jquery mouseout

jQuery's on a method to install the event handlers for the click and mouse hover events for the same element. The problem is that when I just use the hover method, it works but doesn't work with click method.

<!DOCTYPE html> 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MyInformation</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
    <p id = "p1">This is paragraph 1</p>
    <p id = "p2">This is paragraph 2</p>
    <p id = "p3">This is paragraph 3</p>
    <script>
        $(p1).on
        ({
            mouseenter: function () 
            {
                $(this).css("color","red");
            },
            mouseleave: function () {
                $(this).css("color","black");
            }
            click: function () {
                alert("hello");
            }
         });
    </script>
</body>
</html>

You have wrong selector and some syntax errors, here is fixed version:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MyInformation</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
    <p id = "p1">This is paragraph 1</p>
    <p id = "p2">This is paragraph 2</p>
    <p id = "p3">This is paragraph 3</p>
    <script>
        $('#p1').on
        ({
            mouseenter: function () {
                $(this).css("color","red");
            },
            mouseleave: function () {
                $(this).css("color","black");
            },
            click: function () {
                alert("hello");
            }
         });
    </script>
</body>
</html>

Combining .click() and .hover() not working!, click() and .hover() not working! I have tried many different ways to edit the code to get it to work. This is what I most recently  Is it possible to have the jQuery hover event (or mouseenter or mouseover events) trigger on an element that is positioned under a fixed or absolutely positioned div that covers the triggering elem

You've missed the comma after the mouseleave function

$('#p1').on
    ({
        mouseenter: function () one mouse enter
        {
            $(this).css("color","red");
        },
        mouseleave: function () {
            $(this).css("color","black");
        },
        click: function () {
            alert("hello");
        }
     });

.mouseover(), This signature does not accept any arguments. This method is a shortcut for .on( "​mouseover", handler ) in the first two variations, and .trigger( The mouseover event is sent to an element when the mouse pointer enters the element. <div id​="other"> We can also trigger the event when another element is clicked:  Not sure what you mean by "hovered", but assuming you have some CSS defined for .receiver:hover pseudo class I would suggest to move them to the separate CSS class .hover and use jQuery toggleClass function.

Two mistakes in your code

  1. $(p1) should be $('#p1')
  2. Comma missing after mouseleave function it should be

    mouseleave: function () {
        $(this).css("color","black");
    },
    click: function () {
        alert("hello");
    }
    

Mouse Events, .click(). Bind an event handler to the “click” JavaScript event, or trigger that event .hover(). Bind one or two handlers to the matched elements, to be executed  After clicking the remove button and add button, then click me does not work. After removing the button and re-appending, the bound click event can’t work anymore. This is where we need to modify the JavaScript to use delegation like so –

.hover(), Bind one or two handlers to the matched elements, to be executed when the The .hover() method binds handlers for both mouseenter and mouseleave events​. I need to detect whether an element is hovered using jQuery. The .hover() method is not going to do what I need. I created this reduced set to show the problem. If you remove lines 6-8 of the JS the code does its basic function, but I need something to replace .is(‘:hover’). On actual sites the code does work,

.live(), A string containing a JavaScript event type, such as "click" or "keydown. A plain object of one or more JavaScript event types and functions to execute for Use of the .live() method is no longer recommended since later versions of In particular, the following issues arise with the use of .live() : mouseover: function​() {. The hover () method specifies two functions to run when the mouse pointer hovers over the selected elements. This method triggers both the mouseenter and mouseleave events. Note: If only one function is specified, it will be run for both the mouseenter and mouseleave events.

Events and Event Delegation, mouseover .mouseover() However, this will unbind all click handlers on all li elements, which isn't what we want. Whenever an event is triggered, the event handler function receives one argument, an event object that is normalized across  Do not confuse the "hover" pseudo-event-name with the .hover() method, which accepts one or two functions. jQuery's event system requires that a DOM element allow attaching data via a property on the element, so that events can be tracked and delivered.

Comments
  • It should be $('#p1') :)