We Keep Coding

hover on dynamically created list

I have a menu with a list of items created dynamically using javascript.
They have different colour and country attributes created using setAttribute.
$("#menuList a").hover(
function() {
var countryName = $(this).attr('country');
var fruitColour = $(this).attr('colour');
$('#toshow').append($("countryName \n fruitColour"));
},
function() {}
);
.toshow {
display: none;
}
#menuList a:hover div.toshow {
top: 0;
right: 0;
display: block;
position: absolute;
z-index: 99999;
background: red;
width: 200px;
height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menubar" id="menuList">
<li>Watermelon</li>
<li>Grapes</li>
<li>Strawberry</li>
<li>Blueberry</li>
</ul>
<div class="toshow" id="toshow"></div>
Here, I want to have a separated hidden div (display at top right of the page or next to the menuList) that does not have any content until any of the <a> tag being hovered, and show its responding two attributes until no more mouse hovered.
The code does not have errors. But I don't see anything in red when the mouse hovered through the list. Is it possible to achieve what I am looking for?

You can use the mouseout event to hide the toshow div with hide as you leave a list element. And at each hover event, you can change the html of toshow to the values of the li element which the user is hovering over and use show to display it.
Also make sure you attach the event handlers after you've inserted the html of the dynamically generated list.:
function displayGeneratedList() {
$('#menuList').html(`
<li>Watermelon</li>
<li>Grapes</li>
<li>Strawberry</li>
<li>Blueberry</li>
`);
$("#menuList a").hover(function() {
var countryName = $(this).attr('country');
var fruitColour = $(this).attr('colour');
$('#toshow').html(`${countryName}<br>${fruitColour}`).show();
});
$('#menuList a').mouseout(function() {
$('#toshow').hide();
});
}
$(document).ready(function() {
displayGeneratedList();
});
#menuList {
display: inline-block;
}
.toshow {
display: none;
float: right;
background: maroon;
width: 200px;
height: 100px;
padding: 5px;
color: white
}
<ul class="menubar" id="menuList">
</ul>
<div class="toshow" id="toshow"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Toggle only one div element at same position (hide all other div)

I’m new to jQuery and struggling with the .toggle() function.
I want to display several <div>-elements in the same position…but only one at the time. If one <div> is opened and a different one is “toggled” it should automatically be closed.
HTML:
$(document).ready(function() {
$("#button1").click(function() {
$("#box1").toggle(1000);
});
});
$(document).ready(function() {
$("#button2").click(function() {
$("#box2").toggle(1000);
});
});
.container {
width: 90px;
}
.box1 {
background-color: green;
color: red;
display: none;
}
.box2 {
background-color: blue;
color: yellow;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class=box1 id=box1>
This is Box 1
</div>
<div class=box2 id=box2>
This is Box 2
</div>
</div>
Box1
Box2
Also, I am pretty sure that I only need one toggle() function and not 4 for the task I am trying to achieve…but trying to call on the same one does not seem to work with my different id/class.
What am I doing wrong/missing here?

Generally, you can use a single document ready function.
In this case, you could also use a single click function to handle your toggles. Since you're using trigger links, you'll need a way to reference the target box, but something like this would work with an additional attribute to get the box name. (You could do it with indexes as well, but for ease of use, I've added a target-box attribute that has the ID of the desired box.)
I've also added the same box class to both divs, you could remove the individual box1/box2 classes since you have IDs that handle differences already.
I've also added a toggle class to the links to give them a more semantic selector and removed the unnecessary 'open/close' duplicates (since toggle is designed to handle both)
jQuery(document).ready(function($){
$('.toggle').on('click', function(){
var targetBox = $(this).attr('target-box'); // Find the target box
$('.box').not(targetBox).hide(1000); // Hide all other boxes
$(targetBox).toggle(1000); // Toggle the current state of this one
});
});
.container {
width: 90px;
}
.box1 {
background-color: green;
color: red;
display: none;
}
.box2 {
background-color: blue;
color: yellow;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="box box1" id="box1">
This is Box 1
</div>
<div class="box box2" id="box2">
This is Box 2
</div>
</div>
Toggle Box1
Toggle Box2

Something like this may do the trick for you. You can hide all elements marked in some way, e.g. all elements of a class. In this snippet I added the class "box" to all boxes, and on open, I first hide all boxes in this way, before showing the specified box.
Now clicking open will open the specified box and close any others, and clicking close will close the specified box.
$(document).ready(function() {
$("#button1").click(function() {
$(".box").hide(1000);
$("#box1").show(1000);
});
$("#buttonclose").click(function() {
$("#box1").hide(1000);
});
$("#button2").click(function() {
$(".box").hide(1000);
$("#box2").show(1000);
});
$("#buttonclose2").click(function() {
$("#box2").hide(1000);
});
});
.container {
width: 90px;
}
.box1 {
background-color: green;
color: red;
display: none;
}
.box2 {
background-color: blue;
color: yellow;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="box box1" id=box1>
This is Box 1
</div>
<div class="box box2" id=box2>
This is Box 2
</div>
</div>
Close Box1
Close Box2
Open Box1
Open Box2

Using jQuery on the select class not all the divs with the same class

Not really sure how to phrase that in the title. Anyways, what I'm saying is that I have three divs with the same class name. I want to add a mouseover function that only works on the select div, not all of them at once. For example :(https://jsfiddle.net/1y2jw2y0/) this makes all the divs show/hide, I only want the selected one to act on the jQuery function.
Html:
<div class="box">
<p class="show">Show</p>
<p class="hide">hide</p>
</div>
<div class="box">
<p class="show">Show</p>
<p class="hide">hide</p>
</div>
<div class="box">
<p class="show">Show</p>
<p class="hide">hide</p>
</div>
Css:
.box {
display: inline-block;
width: 150px;
height: 150px;
border: 1px solid #000;
}
.hide {
display: none;
}
jQuery:
$(document).ready(function() {
$('.box').mouseover(function() {
$('.hide').show();
$('.show').hide();
});
$('.box').mouseleave(function() {
$('.hide').hide();
$('.show').show();
});
});

Use this to target the "selected" element, then select the child with find() or children():
$(document).ready(function() {
$('.box').mouseover(function() {
$(this).children('.hide').show();
$(this).children('.show').hide();
});
$('.box').mouseleave(function() {
$(this).children('.hide').hide();
$(this).children('.show').show();
});
});
JSFiddle Demo
Edited, to outline the performance issues brought up:
For basic details about the difference between find and children, this answer is a good resource.
In this case, I found .find() to be faster as a whole, usually ~.2ms.
After extensive testing, It appears there is very little, or no difference between using find(), or using $('.selector', this)
Overall, the results were similar. In some cases, it appears $('.selector', this) is slower, in others find().
However, find does give you extra functionality that cannot be achieved with $('.selector', this), such as a direct child selector: .selector > .anotherone, or caching the jQuery object to save resources.
Summary: There isn't much difference, it all depends on your case, and what you prefer.

You can do it all in CSS:
.box:hover .hide {
display: block;
}
.box:hover .show {
display: none;
}
Example: http://jsfiddle.net/Zy2Ny/
If you really want to do it in JavaScript, simply use $(this) and find():
More information about whether children() or find() is faster.
$(".box").mouseover(function() {
$(this).find(".hide").show();
$(this).find(".show").hide();
});
$(".box").mouseleave(function() {
$(this).find(".hide").hide();
$(this).find(".show").show();
});
.box {
display: inline-block;
width: 150px;
height: 150px;
border: 1px solid #000;
}
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="boxes">
<div class="box">
<p class="show">Show</p>
<p class="hide">Hide</p>
</div>
<div class="box">
<p class="show">Show</p>
<p class="hide">Hide</p>
</div>
<div class="box">
<p class="show">Show</p>
<p class="hide">Hide</p>
</div>
</div>
Example: https://jsfiddle.net/1y2jw2y0/5/

Add a 'this' along with the selector,
$(document).ready(function() {
$('.box').mouseover(function() {
$('.hide', this).show();
$('.show', this).hide();
});
$('.box').mouseleave(function() {
$('.hide', this).hide();
$('.show', this).show();
});
});
Example: https://jsfiddle.net/1y2jw2y0/6/
So basically you have to select the child selector of the mouse hovered element instead.
NOTE:- You can do this using find() & children() jquery API's as well. But it's bit slower than selecting directly.
And why not doing with pure css? See the example below,
.box {
display: inline-block;
width: 150px;
height: 150px;
border: 1px solid #000;
}
.hide,
.box:hover > .show {
display: none;
}
.box:hover > .hide {
display: block;
}
Example: https://jsfiddle.net/1y2jw2y0/3/

Change your syntax to
$('.box').mouseover(function() {
$(this).find('.hide').show();
$(this).find('.show').hide();
});
Just navigate from the current element which trigerred the event to its child elements using $(this)

The problem is that your selector is targeting all of the divs with that class name in the document. You need to limit the scope to just the divs inside of the box you care about. One way to do this would be
$(this).find('.hide').show()
Instead of
$(".hide").show();
See here https://jsfiddle.net/1y2jw2y0/1/

You can see: $('.box') select all .box div.
So that $('.hide') select all .hide p => when you click on a box, all .hide p are affected.
You can fix as following code:
$(this).select('.hide').hide()
$(this).select('.show').show()

Mouseenter mark only one active node in hierarchy

I have several nested div-s and I would like to mark only one of them active when the mouse is over that element. The following code isn't work for every situation.
Code sample:
Red -> container
Green -> outer
Yellow -> inner
Blue ->active
The most inner div with the mouse should have the blue background only.
It works only for very few interactions and most of the times it fails. What would be the best and less resource heavy solution for this problem?
function markActive($el) {
$el.addClass('active');
$el.parent().triggerHandler('inactive');
}
function markInActive($el) {
$el.removeClass('active');
$el.parent().triggerHandler('active');
}
$('div').on({
mouseenter: function() {
markActive($(this));
},
mouseleave: function() {
markInActive($(this));
},
inactive: function() {
markInActive($(this));
},
active: function() {
markActive($(this));
}
});
div {
clear: left;
float: left;
padding-left:20px;
height: 400px;
background: #f00;
}
div div {
height: 125px;
background: #0f0;
}
div div div {
width: 280px;
height: 50px;
background: #ff0;
}
div.active {
background: #00f;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div class="outer">
<div class="inner">
<span>Most inner #1</span>
</div>
<div class="inner">
<span>Most inner #2</span>
</div>
</div>
<div class="outer">
<div class="inner">
<span>Most inner #3</span>
</div>
</div>
</div>

Usually what we do need is mouseenter and mouseleave events, those aren't fired when user enters (ou leaves) a child element. In your case you need the old mouseout and mouseover events, that are trigged in that cases.
In the comments you've post a working fiddle: https://jsfiddle.net/ddsxxeer/1/
:)

Mouse hover using jQuery keeps bouncing

I am trying to make a show content on mouseover and make it stay visible while the mouse is hovered on the list since I am planning to put a button there, but when I do hover, hidden content kept bouncing for some reason.
jQuery code
$('li.employers').mouseover(function () {
$('.employer_content').show("slow");
$(this).addClass("bluehover");
});
$('li.employers').mouseout(function () {
$('.employer_content').hide("fast");
$(this).removeClass("bluehover");
});
HTML
<li class="employers">
<div>employer</div>
<div class="employer_content">some content.</div>
</li>
<li class="court">
<div>court</div>
<div class="court_content">some content.</div>
</li>
http://jsfiddle.net/zLdnnxnh/3/

You can use only CSS to show/hide the contents.
You can take advantage of :hover class in CSS.
Demo using CSS only
.whatwedo {
padding: 20px;
color: #fff;
max-width: 480px;
margin: 0 auto;
}
ul li {
list-style-type: none;
}
ul > li {
background-color: #08588c;
display: inline-block;
width: 100%;
cursor: pointer;
float: left;
max-width: 100px;
padding: 10px;
}
.whatwedo {} ul.wwd_list {
padding: 0;
margin: 0;
}
.employer_content,
.court_content,
.companies_content,
.labor_content {
display: none;
clear: right;
}
.bluehover {
background-color: #01395d;
}
.content {
padding-top: 10px;
display: none;
}
.wwd_list li:hover .content {
display: block;
}
<div class="whatwedo">
<ul class="wwd_list">
<li class="employers">
<div>employer</div>
<div class="content">some content.</div>
</li>
<li class="court">
<div>court</div>
<div class="content">some content.</div>
</li>
<li class="companies">
<div>companies</div>
<div class="content">some content.</div>
</li>
<li class="laborunion">
<div>labour union</div>
<div class="content">some content.</div>
</li>
</ul>
</div>
CSS Demo with Animation
If you still want to use jQuery:
You are using mouseover event that is causing the handler to run when the mouse is moved over the element, use mousein instead
Use hover instead of mousein and mouseout
Your code is not flexible, you can optimize your code as follow
Use stop() to stop the previous animations
Demo
$('.wwd_list li').hover(function() {
$(this).find('div.content').stop().show("slow");
$(this).addClass("bluehover");
}, function() {
$(this).find('div.content').stop().hide("slow");
$(this).removeClass("bluehover");
});
.whatwedo {
padding: 20px;
color: #fff;
max-width: 480px;
margin: 0 auto;
}
ul li {
list-style-type: none;
}
ul > li {
background-color: #08588c;
display: inline-block;
width: 100%;
cursor: pointer;
float: left;
max-width: 100px;
padding: 10px;
}
.whatwedo {} ul.wwd_list {
padding: 0;
margin: 0;
}
.employer_content,
.court_content,
.companies_content,
.labor_content {
display: none;
clear: right;
}
.bluehover {
background-color: #01395d;
}
.content {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="whatwedo">
<ul class="wwd_list">
<li class="employers">
<div>employer</div>
<div class="content">some content.</div>
</li>
<li class="court">
<div>court</div>
<div class="content">some content.</div>
</li>
<li class="companies">
<div>companies</div>
<div class="content">some content.</div>
</li>
<li class="laborunion">
<div>labour union</div>
<div class="content">some content.</div>
</li>
</ul>
</div>

You can use hover instead of mouseover and mouseout. Something like this:
$('li.employers').hover(function () {
$('.employer_content').show("slow");
$(this).addClass( "bluehover" );
console.log('mouse in');
}, function() {
$('.employer_content').hide("slow");
$(this).removeClass( "bluehover" );
console.log('mouse out');
});
Here's an example

How about this?
You can use stop() to stop the animation and continue the new animation from where it has stopped
$('.employer_content').stop().show("slow");
$('.employer_content').stop().hide("slow");
As recommended by others, use mouseenter than mouseover

Replace mouseover function with mouseenter and mouseout with mouseleave.
You can see this fiddle is working.
http://jsfiddle.net/ebilgin/zLdnnxnh/7/

Try using mouseenter and mouseleave instead:
From https://api.jquery.com/mouseover/:
This event type can cause many headaches due to event bubbling. For
instance, when the mouse pointer moves over the Inner element in this
example, a mouseover event will be sent to that, then trickle up to
Outer. This can trigger our bound mouseover handler at inopportune
times. See the discussion for .mouseenter() for a useful alternative.
$('li.employers').mouseenter(function () {
$('.employer_content').show("slow");
$(this).addClass("bluehover");
});
$('li.employers').mouseleave(function () {
$('.employer_content').hide("fast");
$(this).removeClass("bluehover");
});
http://jsfiddle.net/zLdnnxnh/5/

Just remove fast from your hide function. It is WORKING. Check this fiddle: http://jsfiddle.net/zp3jr43u/
The JavaScript code should like the following.
$('li.employers').mouseover(function () {
$('.employer_content').show("slow");
$(this).addClass("bluehover");
});
$('li.employers').mouseout(function () {
$('.employer_content').hide();
$(this).removeClass("bluehover");
});

Somehow the mouseover event gets triggered multiple times. I got it working by using the .stop() method before toggling the element.
http://jsfiddle.net/zLdnnxnh/4/

There's no need to have separate classes for each list item you have. Even with these separate classes the code below should get you up and running with ease.
$('.wwd_list li').hover(function () {
$('div:last-child',this).show("slow");
$(this).addClass( "bluehover" );
}, function(){
$('div:last-child',this).hide("slow");
$(this).removeClass( "bluehover" );
});
Note the fact that you only need to use one hover function instead of mouse in and mouse out. This works because you have two divs in the wwd_lsit class and the last one just so happens to be the one you want to target. So be careful with this if you ever want to change something!

Replace mouseover with mouseenter and mouseout with mouseleave.
See a more factorised form :
$('li').on({
mouseenter: function() {
jQuery("div.content", this).show('slow');
$(this).addClass( "bluehover" );
},
mouseleave: function() {
jQuery("div.content", this).hide('fast');
$(this).removeClass( "bluehover" );
}
});
(content class has been added to each content divs)
See the updated fiddle