Develop Reference

JQuery Hover Method - Out function is not working

I am applying an hover effect on an image with JQuery.
State on page load :
State on hover :
State on mouseout :
Here is the code snippet :
$(document).ready(function(){
$(".image-container").hover(function() {
$(this).parents().children().children('.image-01').css({'background-color':'#D4E619', 'opacity': '0.5'}),
(function() {
$(this).parents().children().children('.image-01').css({'background-color':'#FFFFF','height':'0', 'opacity': '0', 'visibility' :'hidden'});
});
});
});
I tried several css instructions but the image keeps the hover state.
Edit :
The final goal is to have a different hover color on several images inside a grid. All elements of the grid have the same classname.
I use a first JQuery function to append the classnames and then, generates a specific hover state on some images.

It's because you mixed in and out functions into single one. So your second function that (I assume) should be called on mouse out is never called.
You should unwrap that function from first one and put as second argument for .hover
$(document).ready(function() {
$(".image-container").hover(
function() {
$(this).parents().children().children('.image-01').css({
'background-color': '#D4E619',
'opacity': '0.5'
})
},
function() {
$(this).parents().children().children('.image-01').css({
'background-color': '#FFFFF',
'height': '0',
'opacity': '0',
'visibility': 'hidden'
});
}
);
});
Some suggestions (quite abstract since no HTML is provided):
You can reduce complexity of selector by finding closest unique wrapper and then find desired element: $(this).closes('.image-wrapper').find('.image-01')
Via JS apply only display/opacity. Via CSS set rules for element when it's shown, no point in setting it's background if it's not visible: $(this).[..].show(), $(this).[..].hide()
I assume you can just do it with css: .image-wrapper:hover .image-01{display: block;}

Suggestions:
Use id for the image, so you can reduce dom complexity.
Use two separate events (.hover and .mouseout)
Use arrow functions rather than 'function' keyword
Example:
$(document).ready(()=>{
$("#image-01").hover(()=>{
/* css code for hover here */
}
$("#image-01").mouseout(()=>{
/* css code for mouseout here */
}
}
Edit:
Maybe you can warp all of your images in a div element.
Then you can use
let images = $(' /* container id */ ').children()
To get its children.
Then just loop through the images and add hover events

JQuery - Hide and Show - Not Functioning

I am trying to use the JQuery Hide and show script to display text on top an image when the div tag is clicked.
The JQuery code I am using is bellow, I have created a JSFiddle to show 2 examples, a before and after with my current result.
UPDATE: I have managed to get the toggle to work and changed some of the CSS. But need div tag hidden until click.
Any help or feedback would be great thanks (Y)
Im sorry about the prev link;
$(".card-options").click(function () {
$(".card-list").toggle();
});
[JSfiddle][1]
[1] http://jsfiddle.net/jinghming/u4epkev4/

Instead Of using
$("#div").click(function(){
$(".box").hide();
});
$("#div").click(function(){
$(".box").show();
});
I used toggle function;
$("#div").click(function () {
$(".box").toggle();
});
*Still working out how to have .box hidden until #div is clicked. But currently does switch between hide and show.

From what I understand, when the little black box is clicked, the list should appear and disappear - I can't see the link to your updated fiddle so here is the update I made to your JS:
$(".card .card-options").click(function () {
$(this).parents('.card').find('.card-list').toggleClass('active');
});
I've also added a display: none; to your .card-list CSS declaration and added the following:
.card-list.active {display: block;}
If you want that bottom bar to be at the bottom of the box then you'd have to do some absolute positioning.
See the updated fiddle here:
http://jsfiddle.net/u4epkev4/4/

You just need to do toggle and you forgot to go into card-text:
$(".card-list").hide(); // Hides the card list at the start
$(".card .card-text .card-options").click(function () {
// Toggle the card-list for the clicked card
$(this).parent().parent().find(".card-list").toggle();
});
Example

jquery .hover() confusion

I am currently programming my portfolio page and I came across a strange behaviour off hover states that I don't understand.
I have some links in a navigation bar at the top of my page. The links are fully defined with :hover and everything. Now I also want the colour of the links to change when I hover the mouse over the different sections of the site that the links refer to.
So I wrote this:
/* Navlink colors */
$('#portfolio').hover(function() {
$('#portLink').css('color','#FF9900');
}, function() {
$('#portLink').css('color','inherit');
});
$('#about').hover(function() {
$('#aboLink').css('color','#FF9900');
}, function() {
$('#aboLink').css('color','inherit');
});
...
At first it seems to work, but when you scroll to the blog and then move the mouse over the navigation the css :hover doesn’t seem to work anymore. This is my test site:
http://www.henning-marxen.de/test/index.html (Don't laugh those are placeholders^^)
Do you know why it behaves like this? I am very confused. Thank you very much in advance.

You should use CSS for this, not jQuery:
#portLink:hover, #about:hover { color: #FF9900; }
Or (to more explicitly match your JS):
#portfolio:hover #portLink, #about:hover #aboLink { color: #FF9900; }
If your link elements are not descendent of those first selectors, use + to group them (as indicated in this fiddle): http://jsfiddle.net/B8Xuw/ *note this assumes they are siblings rather than parent>child
#portfolio:hover + #portLink, #about:hover + #aboLink { color: #FF9900; }

You need a mix of js and css for this. In your css you need to apply your styles with the hover state but also with a class which I'll call current for this example.
.nav-link:hover,
.nav-link.current{
color:#FF9900;
}
Then all you javascript needs to do is add or remove the class depending on which part of the site you have scrolled to:
var navLinks = $('.nav-link');
//each time the user scrolls, reset all links by removing class.
navLinks.removeClass('current');
//Then find the link that needs highlighting and add the class to it.
//There obviously needs to be some logic here to filter the correct link.
navLinks.filter('[href="#portfolio"]').addClass('current');

Try this:
/* Navlink colors */
$('#portfolio').hover(function() {
$('[href="#portfolio"]').css('color','#FF9900');
}, function() {
$('[href="#portfolio"]').css('color','inherit');
});
$('#about').hover(function() {
$('[href="#about"]').css('color','#FF9900');
}, function() {
$('[href="#about"]').css('color','inherit');
});

How can I ensure that my Submenu does not disappear when I hover out or add a delay before it disappears

I have a CSS3 Navigation Menu with no Javascript, I like how it is right now but there is one problem and the users are getting bothered with it.
The problem is that when a user hover over a Menu Link the submenu pops up which is exacly what I want but If user move the mouse arrow away from the submenu or the menu link, its dispairs ULTRA fast. It's very annoying and I have no Idea how to fix this, there is two solutions one way is to always show the submenu the other solution is that when a user hover out from the submenu the submenu should atleast wait 5-10 secs before disappearing and also if you hover out and hover back the submenu should stay. But I have no idea how to do it.
Here is the code and example try it out, any solutions is appreciated!
http://jsfiddle.net/nPdNd/ expand the result window in Jsfiddle to see the whole nav menu
Thanks in advance!

Example: http://jsfiddle.net/nPdNd/40/
Using jQuery
$(document).ready(function(){
var clearli;
$(".test").hover(function() {
clearTimeout(clearli);
$("ul#nav li").removeClass('current');
$(this).addClass('current');
}, function() {
var getthis = $(this);
clearli = setTimeout(function() {
$(getthis).removeClass('current');
}, 500);
});
});
Changed CSS
ul#nav li:hover > ul { to ul#nav li.current > ul {
ul#nav li:hover > ul li a { to ul#nav li.current > ul li a {
EDIT: I changed the selector due to a bug to .test and added class test to the <li>
EDIT2: I feel stupid, I forgot to stop the timeout counter. Edited above.

Multiple solutions exist to address your problem:
Use css-transitions to delay disappearance of your submenu (you mentioned in chat that you don't have access to stylesheets... maybe try using inline styling? It's not the best idea, but maybe you can live with it):
http://www.w3schools.com/css3/css3_transitions.asp
https://developer.mozilla.org/en/CSS/CSS_transitions
http://www.w3.org/TR/css3-transitions/
If you have jQuery, you can use .animate() to do
the same thing:
http://api.jquery.com/animate/
Take a look at .stop() too:
http://api.jquery.com/stop/
If all else fails, you can try playing around with setTimeout();
https://developer.mozilla.org/en/DOM/window.setTimeout
http://www.w3schools.com/js/js_timing.asp

this is ONLY an example - http://jsfiddle.net/nPdNd/22/
i would suggest you experiment yourself, until you get a desired result
this example is based on mouseenter/mouseleave events:
$("#nav li").mouseenter(function(){
$(this).children('#sub').show("slide", { direction: "up" }, 300);
});
$("#nav li,#sub").mouseleave(function(){
$(this).children('#sub').hide("slide", { direction: "up" }, 300);
});
it is also uses JQuery UI

Hop, here is your jsfiddle modified: http://jsfiddle.net/Ralt/nPdNd/25/
Now, as you can see, it's far from perfect. You shouldn't change the style property, but rather add then remove a class, but you get the idea of how to do that.

Please add this script in you page , This is easy way
Step 1-
Add comon jquery in you page
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
Step 1-
Add this script in your page -
<script type="text/javascript">
jQuery(document).ready(function() {
$('ul#nav li').hover(function()
{
$(this).find('ul').stop(true,true).slideDown()
},
function()
{
$(this).find('ul').stop(true,true).slideUp()
});
});
</script>
I do have little changes in your css
Demo http://jsfiddle.net/nPdNd/28/
your code (li:hover)not work ie6 , did u check it ?

Check it.... http://jsfiddle.net/lakshmipriya/nPdNd/31/
Is this speed is ok for you....

CSSS transitions would be the only way to do this with only CSS. Simply set the transition-delay, then no CSS change will take effect until the delay clock is done. The only problem with this is IE, which does not support CSS transitions.
https://developer.mozilla.org/en/CSS/transition-delay
Other than this you will need to resort to JavaScript based menus, implementations of which can be found all over the internet.

Jquery fade background on hover?

There is a link, with no background, and a css rule, which changes background on hover.
Parent bg is white, link on hover - blue.
How can I do a hover effect slowly, from white to blue?
Thanks.
li a {}
li a:hover { background: blue; }

jQuery('a#theLink').hover(function(){
$(this).stop().animate({backgroundColor: 'blue'});
}, function() {
$(this).stop().animate({backgroundColor: 'white'});
});
For this to work you need to download the "color plugin" for jQuery.

You don't need an extra color plugin. You just need jQuery UI on top of jQuery, which lets you do animations also on color. (Or if you don't want to use jQuery UI for some reason, I guess another plugin will do the trick. But I have successfully tried this with just including jQuery core and jQuery UI.)
Animation itself goes something like...
$("li").hover(function() {
$(this).animate({
backgroundColor: "#ffffff"
}, 'slow');
});

bgFade a very great and simple plugin that animates de background image:
http://www.isthatclear.com/jquery/bgFade/

In order to animate colors, you need the color plugin

You'll need to use a plugin as JQuery can't animate colours out of the box.
Try the Colour Animation plugin
Then it'll be something like:
$(this).animate({ backgroundColor: "blue" }, 'slow');