Develop Reference

jQuery .on() hover not working for HTML5 select box

I'm trying to capture the event when the mouse is hovering over the select box, be it collapsed or expanded. I'm using .on() in the following manner,
$(document).on('hover', "select#selectBox", function() {
alert("done");
});
Please note that I'm using this snippet inside DOM document ready too.
I've tried changing the event to click, scroll, mouseover, mouseenter, etc too.
Doesn't seem to work for those too.
Please point out where I'm going wrong.
I've made a JSFiddle: https://jsfiddle.net/g9vf1mty/2/
EDIT: Thanks for the quick response everyone!
I have fixed my mistakes :)
I have tweaked the JSFiddle a little bit. Now, I'm attempting to scroll the select box with a size lesser than the number of options and have changed the 'hover' event to 'scroll' event. It does not seem to work that way.
I'm using jQuery 2.1.3.
JSFiddle here: https://jsfiddle.net/g9vf1mty/8/

You don't need to wrap event bound to document level inside ready pseudo event. And because you want to delegate event, maybe to hanlde dynamic elements, the correct way would be to bind both mouseenter & mouseleave events this way:
eventually filtering by event type inside handler (in/out)
$(document).on('mouseenter mouseleave', "#selectBox", function(e) {
alert("done: " + e.type);
});

$("select#selectBox").hover(function() {
alert("working");
});
use hover function, in the above manner. and more importantly, you missed jQuery library too.
As on("hover") was deprecated form jQuery 1.8, it won't work on Higher versions of jquery.

You should use mouseenter event
and include jquery in your fiddle :)
Look also at this (SO question)[Is it possible to use jQuery .on and hover?

jQuery on hover event does not work

I have a site where I have some divs with hidden divs inside. What I am trying to do is to show the hidden divs when I hover over the parent div. I can't use CSS3's :hover because I need to support ie6. So I used jquery. which does not work for me.
Here is an example: JSFiddle
$('#front-container').on("hover", "#jobs-by-cat .job", function () {
$(this).find('.hover').toggleClass('hidden');
});
And this is how it should look on hover: JSFiddle
The #jobs-by-cat div is dynamically changed so the selection must be made like that.

There is no event called hover, the .hover() function is a shortcut to register mouseenter and mouseleave event handlers, so you need to use it
$('#front-container').on("mouseenter mouseleave", "#jobs-by-cat .job", function () {
$(this).find('.hover').toggleClass('hidden');
});
Demo: Fiddle

As per the jQuery docs for .on:
Deprecated in jQuery 1.8, removed in 1.9: The name "hover" used as a
shorthand for the string "mouseenter mouseleave". It attaches a single
event handler for those two events, and the handler must examine
event.type to determine whether the event is mouseenter or mouseleave.
Do not confuse the "hover" pseudo-event-name with the .hover() method,
which accepts one or two functions
So you need to replace with mouseenter and mouseleave events:
$('#front-container').on("mouseenter mouseleave", "#jobs-by-cat .job", function () {
$(this).find('.hover').toggleClass('hidden');
});

Try with "mouseenter" and "mouseleave" events.
$('#front-container').on("mouseenter mouseleave", "#jobs-by-cat .job", function () {
$(this).find('.hover').toggleClass('hidden');
});

hover and moveout not giving expcted result

Because I am creating DOM using Jquery it was difficult to copy the output so i am adding one image of code that i have captured using one tool
i have attached hover and mouseout event to id='nf1' using this code
$("#nf"+n).hover(function(){
$("#nf"+$(this).attr("post_id")+"post_delete").show();
});
$("#nf"+n).mouseout(function(){
$("#nf"+$(this).attr("post_id")+"post_delete").hide();
});
Here n is post_id and i am looping all post_id got from response.This attach events but not giving expected behaviour Like when mouse over to id='nf1post_delete' it is hide
Please ask if any doubts

The way you're describing this, you will actually want to pass two functions to .hover(), one for the action on mouseenter and one for the action on mouseleave. You can pass only one function to .hover(), but it will run that function when you roll over and when you roll out.
http://api.jquery.com/hover/
So, try this instead:
$("#nf"+n).hover(function(){
$("#nf"+$(this).attr("post_id")+"post_delete").show();
},function(){
$("#nf"+$(this).attr("post_id")+"post_delete").hide();
});
The .mouseout() function isn't needed at all.

At first, .hover() includes mouseenter and mouseleave. Do you put both function in there and don't use an additional event. Also don't use mouseout(). Use instead mouseleave().
So you either use hover(function(){},function(){}); alone, or you use mouseenter() and mouseleave().

Since you're manipulating the DOM, I'm going to recommend using jQuery .on() instead of .hover():
$(document).on({
mouseover: function(){
$("#nf"+$(this).attr("post_id")+"post_delete").show();
},
mouseout: function(){
$("#nf"+$(this).attr("post_id")+"post_delete").hide();
}
}, "#nf"+n);
If you're creating something in the DOM after the page has loaded, .on() helps to attach event listeners to it.
jQuery API for .on()

Why can I not hide an element on click using jQuery?

I want to let a div show and disappaer with jquery and css.
The code does not work:
HTML
<html>
<head>
</head>
<body>
<div class="box" id="b1">
click to show content
<div class="content">
here is content here is content here is content
<div class="button" id="b2">remove content</div>
</div
</body>
</html>
jQuery
$(document).ready(function() {
$('#b1').click(function() {
$('.content').css({
"display": "block"
});
});
$('#b2').click(function() {
$('.content').css({
"display": "none"
});
});
});
Demo: http://jsfiddle.net/jTgRF/41/

The problem is that you don't stop the event from propagating.
When you click the button it actually hide the element at first, but the event propagate up to the parent element, at which you catch the click and show it again. It goes so fast it looks like nothing is happening, but actually when you click on #b2, the elements get hidden, the event then bubble up to the parent #b1, to which you have attached click-event listener to show the content.
Therefor, you need to use .stopPropagation() on #b2.
$(document).ready(function(){
$('#b1').click(function(){
$('.content').show();
});
$('#b2').on("click", function(e){
$('.content').hide();
e.stopPropagation();
});
});
What you need to do is to pass the click event to the call-backfunction (declared e in my example) and then call stopPropagation() on it to make sure that it doesn't bubble up to the parent element.
Here is a working example: http://jsfiddle.net/jTgRF/64/
Note I use .show() and .hide(), which is exactly the same as what you do with .css(), but is more readable in my opinion.
Edit:
As noted by Venu in his answer, the content will show if you click on the black-area as well, not just the "show content"-text. The easiest way to solve that would be to just move the id="b1" attribute from the div with class content and put it on the a-element instead.
See my updated fiddle: http://jsfiddle.net/jTgRF/65/

since, you are attaching an event for an element which is not available in dom, event wont get attached to the element. Use live
$('#b2').live('click', function(){
$('.content').css({"display":"none"});
});
Attach an event handler for all elements which match the current selector, now and in the future.
EDIT
1)Use on instead of live as Live is deprecated.
2) There is one more issue with your css. you have set height to 150px for box class. so if you click on black area also, event gets fired.
So move the b2 element outside b1, this would solve the event propagation to the parent-element also.

You need to change the button click handler to
$('#b2').click(function(e){
e.stopPropagation();
$('.content').css({"display":"none"});
});
You need to add event.stopPropagation() Or click event will be propagated to the parent div and .content will be hidden immediately again.
Demo: http://jsfiddle.net/joycse06/jTgRF/56/
You should use jQuery .show() and .hide() to show/hide elements.

Venu's anwser works but live() is depracated.
You should use on() instead :
jQuery .on function for future elements, as .live is deprecated
Code
$(document).ready(function(){
$('#b1').click(function(){
$('.content').css({"display":"block"});
});
$(document).on('click', '#b2', function(){
$('.content').css({"display":"none"});
});
});
Hope this helps

Show a picture when mousemove over a text with jquery?

do you know any tutorial or script that shows a picture when mousemove over a html text?

A basic example using jQuery would be something like this:
CSS
#myImage {
display:none;
}​
HTML
<span class='pictureTrigger'>some text</span>
<img id='myImage' src='/path/to/image' />​
jQuery
$(function() { // Makes sure DOM loads before code is run
$('.pictureTrigger').hover( // Assign event handlers for mouseenter/mouseleave
function() { $('#myImage').show(); }, // Find myImage and show it on mouseenter
function() { $('#myImage').hide(); } // Find myImage and hide it on mouseleave
);
});
​It's hard to give a better answer without more specifics in the question.
The basic idea is that the text is contained in a span, which has a class called pictureTrigger. Could be named anything, though.
A hover event (which is actually shorthand for two events, mouseenter and mouseleave) is added to all elements with the pictureTrigger class.
The two functions represent the mouseenter and mouseleave events respectively. The event handler functions find the img with the ID myImage, and show/hide it.
Relevant jQuery docs:
.show() - http://api.jquery.com/show/
.hide() - http://api.jquery.com/hide/
.hover() - http://api.jquery.com/hover/

Google for tooltip plugin. There's a lot of them.