We Keep Coding

hover trigger called just after multilevelpushmenu first toggle

i use jquery, bootstrap, fa, normalize and jquery.multilevelpushmenu.js v2.1.4 that provide side-menu multi level, i'm tring to combined hover operation with that menu, and the hover call just after first toggle menu, never seen this behavior before.
<script>
$(document).ready(function () {
$('.content gallery-item').hover(function () {
$(this).find('.content img-title').fadeIn(300);
}, function () {
$(this).find('.content .img-title').fadeOut(0);
});
});
</script>
Here what i have tried:
isolate to minimum script / JS-libs
tried to call to dest hover tag with more specific css selector
This is the JSFiddle of the complete scenario.
How can i make it work onload?

CSS way to fix the issue is to give the element a lower z-index. As the menu container is overlapping it that's why it is unable to target the element properly.
This code should fix it.
.multilevelpushmenu_wrapper{
min-width: auto;
}

get particular image with same class

i am currently implementing a system where I require to make a image layer on hover of a particular image. From jquery how is it possible to get and set visibility of a particular image only even if they have the same class.
This is my js code
$(document).ready(function() {
$('.imgclass').mouseover(function() {
$('.hoverimg').css('visibility','visible');
$('.hoverimg').css('opacity','0.6');
});
$('.imgclass').mouseout(function() {
$('.hoverimg').css('visibility','hidden');
});
});
To make it more clear this is an example I made. http://jsfiddle.net/xwj4A/
As you can see atm when one hovers on a particular image both images visibility is set to visible (as they have the same class). Thanks for your help!

If i understand you right , you need this :
$(document).ready(function() {
$('.imgclass').mouseover(function() {
$('.hoverimg' ,this).css('visibility','visible');
$('.hoverimg' ,this).css('opacity','0.6');
});
$('.imgclass').mouseout(function() {
$('.hoverimg' ,this).css('visibility','hidden');
});
});
JSFiddle: http://jsfiddle.net/xwj4A/8/

Replace:
$('.hoverimg')
with:
$(this).find('.hoverimg')
In order to only select the .hoverimg elements that exists within the hovered container.

You have to apply new styles to target element instead of all elements with same class.
$(document).ready(function() {
$('.imgclass').mouseover(function() {
$('.hoverimg', this).css({
visibility: 'visible',
opacity: 0.6
});
});
$('.imgclass').mouseout(function() {
$('.hoverimg', this).css('visibility','hidden');
});
});
$(this) refers to actual element which triggered event.

Jquery hover vs. click expandable menu

A client has a site built in Magento, and there's this bit of javascript controlling how the menu is displayed:
<script type="text/javascript">
jQuery('.nav-add li.level0, .nav li').hover(
function(){
jQuery(this).children('.nav-widget:not(.inSlide), ul:not(.inSlide)').addClass('inSlide').slideDown(700,function(){
});
},
function(){
jQuery(this).children('.nav-widget, ul:not(.active)').delay('2000').slideUp(500,function(){
jQuery(this).removeClass('inSlide');
});
}
)
jQuery('.nav-widget').hide();
</script>
Right now it's set to expand whenever the user hovers on an item, but it's rather annoying to try to navigate that way. Is it possible to modify this code so that it expands when a user clicks on an item?
I tried replacing .hover with .click or .mouseup to no avail.

Assuming you just want to toggle the hover behavior by click instead of hover you can try something like this.
jQuery('.nav-add li.level0, .nav li').click(function(){
if(!$(this).data('clicked')){
jQuery(this)
.data('clicked', true)
.children('.nav-widget:not(.inSlide), ul:not(.inSlide)')
.addClass('inSlide')
.slideToggle(700,function(){
});
}
else{
jQuery(this)
.data('clicked', false)
.children('.nav-widget, ul:not(.active)')
.delay('2000')
.slideUp(500,function(){
jQuery(this).removeClass('inSlide');
});
}
});
jQuery('.nav-widget').hide();

The reason it doesn't work by simply replacing the .hover() with .click() is because the hover event needs two functions, one for onhover one for offhover. The .click() event only takes one function. I assume you want the top function as your click event.
jQuery('.nav-add li.level0, .nav li').click(
function(){
jQuery(this).children('.nav-widget:not(.inSlide),
ul:not(.inSlide)').addClass('inSlide').slideDown(700,function(){
});
}

Drop Down Problems

I am trying to create a drop down list. I have it working but not fully, using this code:
$(document).ready(function(){
$("#zone-bar li em").hover(function() {
var hidden = $(this).parents("li").children("ul").is(":hidden");
$("#zone-bar>ul>li>ul").hide()
$("#zone-bar>ul>li>a").removeClass();
if (hidden) {
$(this).parents("li").children("ul").toggle()
.parents("li").children("a").addClass("zoneCur");
}
});
});
I managed to make it work so on hover the drop down list will appear, but when you move to select one of the items from the drop down list the drop down list closes. How do I fix that?
It works if I put it to onclick but then you have to click the arrow to close it again. You can see a live example at http://doctorwhohd.com (currently using onclick)

It is likely behaving this way because hover() is intended to take 2 functions. One for mouseenter and one for mouseleave.
When you give it only one, I think it fires the one for both events.
Instead of hover(), use mouseenter().
$("#zone-bar li em").mouseenter(function() {
var hidden = $(this).parents("li").children("ul").is(":hidden");
$("#zone-bar>ul>li>ul").hide()
$("#zone-bar>ul>li>a").removeClass();
if (hidden) {
$(this).parents("li").children("ul").toggle()
.parents("li").children("a").addClass("zoneCur");
}
});

Try putting the hover on
#zone-bar li
and not on the em
Update, yes, you would need to modify the script:
$("#zone-bar li").hover(function() {
var hidden = $(this).children("ul").is(":hidden");
$("#zone-bar>ul>li>ul").hide()
$("#zone-bar>ul>li>a").removeClass();
if (hidden) {
$(this).children("ul").toggle()
.children("a").addClass("zoneCur");
}
});
However, the suggestion of using mouseenter is probably superior, it seems that this causes momentary flicker.
You might want to consider doing this with pure CSS, there is no obvious reason to employ jquery to create this effect.
#zone-bar li{ height:1em; overflow:hidden};
#zone-bar li:hover{ height:auto};

Click link when clicking LI

Ok, I have this list layout that I use, and I want the list row to highlight when I hover it. Now, that's not a problem really, since I can use javascript to change classes for example, but I want the cursor to change to a pointer when hovering and when clicked, I want to follow the link within.
Example code can be found here:
http://sandman.net/test/hover_links.html
I also want to highlight the LI only when there is an eligible link inside it. Preferably using jQuery... Any ideas?
--
I've edited the code to incorporate the suggestion below, and the problem is that the click() action fires when I click other items inside the LI...
--
Right, so now I've edited the code. I've added a class to the link(s) that SHOULD be followed on click, and then a event.stopPropagation() on the links that does NOT have this class, so they are handeled by the browser accordingly.
Thanks again!

jQuery('li:has(a)')
.css('cursor', 'pointer')
.hover(function(){
jQuery(this).addClass('highlight');
}, function(){
jQuery(this).removeClass('highlight');
})
.click(function(e){
if (e.target === this) {
window.location = jQuery('a', this).attr('href');
}
});

This worked for me
$('#element li').hover(function() {
$(this).animate({
backgroundColor: "#4CC9F2"
}, "normal")
}, function() {
$(this).animate({
backgroundColor: "#34BFEC"
}, "normal")
});
I used jquery.color.js plugin it animates really nice hover effect color change