We Keep Coding

jQuery FadeIn / FadeOut Methods not working

I want to fade the image on hover.
Why does this not work?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#lightbulb").hover(function(){
$("#lightbulb").fadeOut('fast');
},function(){
$("#lightbulb").fadeIn();
});
});
</script>
Other jQuery methods like CSS styling and changing image sources are working.

You cannot place the fadeOut() effect at the same element you add the hover() to.
fadeOut() sets the Element to "display: none;" and removes it from the DOM.
So a $fadeIn() effect can never take place, because the element with the $hover() targeted is gone.
You need to target a parent container with hover() and fadeIn() and fadeOut() the inner elements. That should work.
$("#parentbulb").hover(function(){
$("#lightbulb").fadeOut('fast');
},function(){
$("#lightbulb").fadeIn();
});

You could use css instead of jQuery if that works. When you fadeOut the element, the hover exit event is fired, so it will just keep toggling between the states the way you have it. Here is a fiddle with an example of hiding/showing on hover. Basically you do like
#elem {
opacity: 1;
transition: opacity: 0.2s;
}
#elem:hover {
opacity: 0;
}
on whichever element you want to hide.

Mouseover and click event conflict

I'm trying to use the on() event to bind both a click and mouseover event to a link, essentially to have hover behaviour on desktop and click for mobile and tablet. The issue I currently have is that both events are triggered at the same time. Is it possible to do this cleanly or should I just add a conditional for the screen width and apply the hover specifically on desktop, click event for mobile? Basic JS fiddle here: http://jsfiddle.net/4wr3da8p/
$('div').on('click mouseover', 'a', function(e) {
e.preventDefault();
$(this).toggleClass('active');
});
EDIT:
Updated the jsfiddle to better show what I'm trying to do. I want to toggle the display of an adjacent element, so I don't think CSS pseudo classes will help.
http://jsfiddle.net/4wr3da8p/
$('div').on('click mouseover', 'a', function(e) {
e.preventDefault();
$('.content').toggleClass('active');
});

You can use tap event with jquery for mobile and mouse over for desktop

I suspect what you are experiencing is that when you first move the mouse into position for a click (but before the actual click), the "active" class toggles on, but then when you click, that class toggles back to off. Such are the issues with a toggle operation.
If all you are trying to do is apply a certain class when the element becomes active or hovered and remove that class when it's not, you don't need JavaScript at all. You can do that with just CSS and the :hover and :active pseudo-classes. You won't need to worry about both scenarios being true at the same time and cancelling each other out.
div:active, div:hover { background:yellow; }
<div>
<p>This will become yellow when you hover over it or when you click it.</p>
<p>The class will no longer be applied when you move the mouse out of the area or after the click is done.</p>
</div>

You can utilize <input type="checkbox"> and <label> elements, change events attached to #bar and #foo elements, css :hover, :checked pseudo classes, general siblings selector ~.
$(function() {
$("#bar").change(function() {
if (this.checked) {
$(this).hide().add("#foo").prop("checked", false);
}
});
$("#foo").change(function() {
if (this.checked) {
$("[for=bar]").css("display", "inline-block !important");
}
});
});
#foo,
#bar,
span.bar,
[for="bar"] {
display: none;
}
[for="foo"]:hover ~ [for="bar"],
#foo:checked ~ [for="bar"],
[for="foo"]:hover ~ .bar,
#foo:checked ~ .bar {
display: inline-block;
}
[for="bar"] {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<input type="checkbox" id="foo">
<label for="foo">foo</label>
<br/>
<br/>
<span class="bar">bar</span>
<input type="checkbox" id="bar">
<label id="close" for="bar">x</label>
jsfiddle http://jsfiddle.net/4wr3da8p/2/

Can I hide a parent div when I hover on it's child div element?

Is there a way to hide a parent div when I hover over a div inside it.
<div class="parent" style="width:500px; height:800px;">
<div class="child" style="width:250px; height:250px; margin:250px auto 0 auto;">
</div>
</div>
I want to hover on the child to make it disappear both the parent and child div elements.
If there is a way even with jquery / javascript then please let me know.
I have 4 parent div and their respective child div and when I hover on another parent div then the hidden div re-appears.

You can use mouseenter event, then hide the closest parent like this
$('.child').on('mouseenter',function(){
$(this).closest('.parent').hide();
});
DEMO

$('.child').on('mouseover',function(){
$(this).parent().hide();
});

$('.child').hover(function(){
$(this).parent().hide();
},
function(){
$(this).parent().show();
});
Demo:
http://jsfiddle.net/JsmVm/

For that you can use jquery hover.
$('.child').hover(function(){
$(this).parent().hide();
});
DEMO
Note: hover function can handle both mouseover and mouseenter and it is best to handle UI element.For example: Fiddle

Disabling mouse events on 'div'

I have an interesting problem in disabling mouse events using the 'pointer-events' css styling.
Please refer the fiddle. It has a parent and two children div, and I make 'pointer-events' as 'none' to one of the children. If I click on that div, its mouse listeners are not triggered (this is expected) but mouse events of its parent div is triggered.
$('#parent').click(function(){
console.log("Parent clicked");
});
How to disable mouse events on the parent div, if I clicked on its children which are disabled for mouse events?
One option is to filter using an "if" condition on the parent click. But i don't need it, as I want to listen for mouse events on 'divs' present behind the parent.
Please provide some help :)
thanks,
Rethna

I couldnt make the pointer-events work as I intended, so I changed the javascript in order to achieve what you wanted.
What i did was to event.stopPropagation on the child2, so you can click him and only fire his click event, not his parent's click event.
By the way, i know little about jquery, so I wrote a mixed beetwen pure javascript and jquery, hope someone can help me translate that.
Here comes the fiddle
CSS:
#child1{
background-color:#ff0000;
width:100px;
height:100px;
pointer-events: all;
}
#child2{
background-color:#00ff00;
width:100px;
height:100px;
pointer-events: all;
}
#parent{
pointer-events: none;
}
Javascript:
$(document).ready(function(){
document.getElementById('child1').addEventListener('click', function(){
console.log("child1 clicked");
}, false);
document.getElementById('child2').addEventListener('click', function(e){
e.stopImmediatePropagation();
console.log("child2 clicked");
}, false);
document.getElementById('parent').addEventListener('click', function(){
console.log("Parent clicked");
}, false);
});

For anyone stumbling across this post, here's something very useful..
el.setPointerCapture() will focus all pointer events on given element.
not only do you isolate the node, but also gain a lot of performance as the browser stops performing hittests on anything else

Nested hover events, only apply to most direct hovered element

HTML:
<div class="outer">
<div class="inner">
</div>
</div>
CSS:
.outer {
outline: 1px solid green;
padding: 20px;
}
.inner {
outline: 1px solid red;
height: 50px;
}
.hover {
outline: 1px solid yellow;
}
JS:
$('.outer, .inner').on('mouseenter', function(e){
$(this).addClass('hover');
}).on('mouseleave', function(e){
$(this).removeClass('hover');
});
http://codepen.io/anon/pen/tEAiG/
Is there a way I can make it so the hover class is only applied to the directly hovered element? ie. When the mouse is inside the inner div only it is yellow, and not outer as well?

Since you are handling the hover by adding the class yourself, rather than using CSS :hover, you can stop propagation of the event in your handler when reacting to the mouseenter.
That way, if the handler is reacting to the .inner it will stopPropagation() to prevent the event from also going to the .outer
Another issue is going to be that you must have entered the outer and handled it in order to even reach the inner, so you will want to remove the hover class that must have been added to the parent node.
Demonstrated in this fiddle

A possible method could be removing the hover class from the outer div and then applying it to the inner div when the mouse is inside the inner div, since whenever you go inside the inner div, the hover class is applied on both divs.

You could do this by making a separate handler for each one.
$('.outer').on('mouseenter', function(e){
$(this).addClass('hover');
}).on('mouseleave', function(e){
$(this).removeClass('hover');
});
$('.inner').on('mouseenter', function(e){
$(this).addClass('hover');
$('.outer').removeClass('hover');
}).on('mouseleave', function(e){
$(this).removeClass('hover');
$('.outer').addClass('hover');
});
Demo

You can remove the class hover on the parent div when the mouse enters the inner div
Like this:
$('.outer, .inner').on('mouseenter', function(e){
$(this).addClass('hover');
$(this).parent(".outer").removeClass('hover');
}).on('mouseleave', function(e){
$(this).removeClass('hover');
$(this).parent(".outer").addClass('hover');
});
I feel like this is a bit of a hack and can be improved by being more specific with the selectors instead of creating just one function for both .outer and .inner
Example on: http://codepen.io/anon/pen/KzILE/