We Keep Coding

Element inside div should not interfere on the event handler

I have a div and inside it I have a p. The paragraph is visually above the div. My event handler is being affected by the paragraph.
This is my event handler:
$("#container-map").on("mouseover mouseleave", ".ct-symbol", function() {
$(this).toggleClass("active-b");
});
So, when I am moving my mouse on the div, it will toggle the class if I cross the paragraph. What I want is to only toggle the class once I enter/leave the div. I also tried to use this:
$("#container-map").on("mouseover mouseleave", ".ct-symbol", ".ct-symbol p" function() {
$(this).toggleClass("active-b");
});
But now it toggles twice once I move my mouse above the paragraph...

$("#container-map").on("mouseenter mouseleave", ".ct-symbol", function() {
if (this.id == "container-map")
{
$(this).toggleClass("active-b");
}
});
That should work. It only fires when this has the same id as the div.

You have to use mouseenter not mouseover
$("#container-map").on("mouseenter mouseleave", ".ct-symbol" function() {
$(this).toggleClass("active-b");
});

If what you want is that your active-b class is only affected when you leave/enter.
You need to use mouseenter not mouseover.
$("#container-map").on("mouseenter mouseleave", ".ct-symbol", function() {
$(this).toggleClass("active-b");
});

How to keep next() function from hiding on hover?

I have a simple jquery menu and I am trying to keep the submenu visible if a user hover overs it. so that I can select it if needed. However, when I get off the hover element the submenu will hide. Obviously, that's what I want as long as it's not also hovering over the submenu.
$(document).ready(function () {
$('.mainBar li a').hover(function(){
$(this).next().show() }, function () {
$(this).next().stop().hide()
});
});
http://jsfiddle.net/azxRX/1/

My opinion is to create this menus with css. Anyway i change a bit to this:
$('.sideBar > ul > li').bind('mouseover', openSubMenu);//This line sets it up so that when the mouse is moved over a li in myMenu, the function openSubMenu is called
$('.sideBar > ul > li').bind('mouseout', closeSubMenu);//This do exacly the same with the above but binds on mouseout instead.
function openSubMenu() {
///when the mouse rolls over the list item,
///the function looks for an unordered list within it.
///If one is found, it sets the style property display to block
$(this).find('ul').css('display', 'block');
};
function closeSubMenu() {
///This one does the oposite of openSubMenu function
$(this).find('ul').css('display', 'none');
};
fiddle

You can do this instead:
$(document).ready(function () {
$('.mainBar li').mouseover(function () {
$(this).find('.subBar').show();
console.log('over');
});
$('.mainBar li').mouseout(function () {
$(this).find('.subBar').hide();
});
});
This is the jsfiddle

Hilighting parent item while hovering child item

I have menu with 2 submenus. Using jQuery I want to higlight hovered item. I can't solve how to higlight parent item, when cursor is on the child item. For hovering I used class caled active:
.vertical-active {
background:#0F6;
}
Jquery function looks like this:
$(document).ready(function (e) {
$('.submenu a').hover(
function () {
$(this).addClass('vertical-active');
$(this).parent('vertical-links a').addClass('vertical-active');
},
function () {
$(this).removeClass('vertical-active');
$(this).parent('vertical-links a').removeClass('vertical-active');
});
});
Problem is in parent selector, but I don't know how to select submenu's parent item.
JSFiddle link:http://jsfiddle.net/6g9tZ/4/

$(document).ready(function() {
$('.submenu a').on('mouseenter mouseleave', function() {
$(this).add($(this).closest('ul').closest('li').children('a')).toggleClass('vertical-active');
});
});
FIDDLE
EDIT:
to highlight the parent as well, you'd do
$('.vertical-links > li > a').on('mouseenter mouseleave', function() {
$(this).toggleClass('vertical-active')
});
FIDDLE

Use .siblings in addition to .closest.
FIDDLE
$(document).ready(function (e) {
$(".vertical-links > li > a").on("mouseenter mouseleave", function(){
$(this).toggleClass('vertical-active');
});
$('.submenu a').on("mouseenter mouseleave",function () {
$(this).toggleClass('vertical-active');
$(this).closest("ul").siblings("a").toggleClass('vertical-active');
});
});

Replace the relevant parts of your code with:
$(this).parents('li:eq(1)').find("> a").addClass('vertical-active');
....
$(this).parents('li:eq(1)').find("> a").removeClass('vertical-active');
One problem with your code is that you were looking for a "parent <a>", but there is no such thing; the <a> is a child of your parent. So here we search for a parent <li>, not the immediate, but actually the grandparent, find its direct <a> child and highlight it.
Additionally you had parent('vertical-links') which should be parent('.vertical-links') (not the dot: its a class not an element).

How do i make so the div's overlap with eachother?

How do i make that when i press a button instead of that the div like dropping under the div the the maybe 'home' div disappear when i fire the other show hidden div ?
Here's the Javascript:
jQuery(document).ready(function () {
jQuery('#hideshow2').live('click', function (event) {
jQuery('#content2').toggle('show');
});
});

pretty easy..... See this fiddle. http://jsfiddle.net/RCfVX/
jQuery(document).ready(function () {
jQuery('#homebtn').click(function (event) {
jQuery('#one').toggle();
jQuery('#two').toggle();
});
});

Changing parent css on child hover

i have look around this forum a lot and can only find the opposite to my question, in other words i am looking to find how to change the parent div's background when the child div is hovered over, i can only find how to change the child div, when the parent is hovered over.
I have 1 parent div with an inner submit button:
<div class="ugd_ele_normal_base">
<input name="ugd_1" type="submit" class="ugd_ele_normal"/>
</div><!--end ugd_ele_normal_base-->
What i want is for when the submit button is hovered over, the parent css changes background.
I have tried a few things, but nothing seems to work.
Thanks for the help

I would use jQuery & CSS for this:
CSS
.black {
background-color: #000000;
}
jQuery
$(function() {
$('.ugd_ele_normal').hover( function(){
$(this).parent().addClass("black");
},
function(){
$(this).parent().removeClass("black");
});
});

$('input.ugd_ele_normal').on({
mouseenter: function() {
$(this).parent().css('background', 'url(/folder/image1.jpg)');
},
mouseleave: function() {
$(this).parent().css('background', 'url(/folder/image2.jpg)');
}
});
or short(er) version:
$('input.ugd_ele_normal').on('mouseenter mouseleave', function(e) {
$(this).parent()
.css('background-color', e.type=='mouseenter'?'url(/folder/image1.jpg)':'url(/folder/image2.jpg)');
});
and to retrieve the old image:
var bgImg = $('input.ugd_ele_normal').css('background-image'),
hvImg = 'url(/folder/image2.jpg)';
$('input.ugd_ele_normal').on('mouseenter mouseleave', function(e) {
$(this).parent()
.css('background-image', e.type=='mouseenter'?hvImg:bgImg);
});
or use classes:
.hoverClass {background: url(/folder/image2.jpg);}
-
$('input.ugd_ele_normal').on('mouseenter mouseleave', function() {
$(this).toggleClass('hoverClass');
});

You can do this way.
$("#ugd_1").hover(function(){
$(this).parent().css("background","red");
},
function(){
$(this).parent().css("background","none");
});
​
​
Live Demo :
http://jsfiddle.net/Z4QDC/2/

i would define some jquery to do this, and use a custom class.
//when the document is loaded, execute the following code
$(document).read(function(){
//on this elements hover, ...
$('.ugd_ele_normal').hover( function(){
//we add the class black to the parent on hover
$(this).parent().addClass("black");
},
function(){
//and remove it on exit hover.
$(this).parent().removeClass("black");
});
});
​
can be seen in action here:
http://jsfiddle.net/xBuyC/

Try:
$('input[name="ugd_1"]').hover(function() {
$(this).parent().css('background-color', 'COLOR');
});
Hope it helps.