We Keep Coding

JS issue with mouseover event to show extra buttons

I'm working on an interface which, when the user hovers over an LI element 2 buttons become visible to offer more functionality. Let's say "edit" and "remove".
I'm having issues with the mouse hit zones.
Mouseover works well when the mouse is actually on the LI element (the grey background) but does not work when the mouse is over text or the actual buttons which need to be clicked.
(For context, this is within a Chrome extension and no in-line JS is allowed. )
Summary demo here: https://jsfiddle.net/matthewzammit/uh9abfcr/16/
thanks!
Matt
-FULL CODE-
HTML
<div id="populateArrayList">
<ul id="myList">
<!--dynamically fill list-->
<li id="0" class="urlElement" name="urlElement">
<div class="urlDetails">
<div class="urlFavicon">
<img src="https://www.google.com/s2/favicons?domain=facebook.com">
</div>
<div name="url" class="urlAddress" id="0">website1.com</div>
</div>
<div class="actionButtons">
<a id="remove0" class="removeButton" name="Remove" href="#"></a>
<a id="edit0" class="editButton" name="Edit" href="#"></a>
</div>
</li>
<!-- item 2 -->
<li id="1" class="urlElement" name="urlElement">
<div class="urlDetails">
<div class="urlFavicon">
<img src="https://www.google.com/s2/favicons?domain=google.com">
</div>
<div name="url" class="urlAddress" id="1">website2.com</div>
</div>
<div class="actionButtons">
<a id="remove1" class="removeButton" name="Remove" href="#"></a>
<a id="edit1" class="editButton" name="Edit" href="#"></a>
</div>
</li>
</ul>
</div>
JS
document.getElementById("myList").addEventListener("mouseover", e => {
e.target.querySelector('.actionButtons').classList.add("editVisibility");
console.log("Target: " + e.target);
})
document.getElementById("myList").addEventListener("mouseout", function (e) {
e.target.querySelector('.actionButtons').classList.remove("editVisibility");
})
document.getElementById("myList").addEventListener("click", function (e) {
if (e.target && e.target.getAttribute('name') == "Remove") {
let idToRemove = e.target.parentElement.parentElement.getAttribute('id');
alert("Remove");
}
if (e.target && e.target.getAttribute('name') == "Edit") {
let idToEdit = e.target.parentElement.parentElement.getAttribute('id');
alert("Edit");
}
});
CSS
.urlElement {
list-style-type: none;
background: #ebebeb;
margin: 10px;
padding: 10px;
border-radius: 7px;
height: 15px;
}
.urlDetails {
/* background-color: red; */
}
.urlFavicon {
float: left;
margin-right: 10px;
/* background-color: green; */
}
.urlAddress {
float: left;
/* background-color: blue; */
}
.actionButtons {
display: none;
}
/* temp icon */
.removeButton {
margin-left: 5px;
padding-right: 20px;
background-image: url("https://img.icons8.com/ios/15/000000/delete-sign.png");
background-repeat: no-repeat;
}
/* temp icon */
.editButton {
margin-left: 5px;
padding-right: 20px;
background-image: url("https://img.icons8.com/ios/15/000000/edit.png");
background-repeat: no-repeat;
/* display: none;*/
}
.editVisibility {
display: unset;
/* Hide button */
}

You can do this with just CSS like this:
.urlElement:hover .actionButtons {
display: block;
}
You can delete the javascript event handlers.

How to change hover action to click action?

Hello people I created two divs and when i hover to h3 shows me something. I want display this only when i click on h3. How i can do this?
How to change hover to click? When i do this doesn't working.
Sorry for my bad language.
$(document).ready(function () {
$('li.requirement').hover(function () {
$(this).find('span').show();
}, function () {
$(this).find('span').hide();
});
});
#wrap {
background: #e7e7e7;
padding: 0px;
text-align: center;
width: 100%;
}
#left, #right {
background: #ccc;
display: inline-block;
padding: 20px;
}
li {
list-style-type: none;
padding: 0px;
margin: 0px;
}
span.lewy {float:right; background:red; padding:20px;}
span.prawy {float:left; background:red; padding:20px;}
h3 {text-align:center;}
h3.praw {float:left;}
h3.lew {float:right;}
.calosc {max-width:500px; margin: 0 auto; border:1px solid red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
<div id="left"><div class="lef">
<li class="requirement" id="requirement_1">
<h3 class="lew">SPR</h3>
<span class="fr drag lewy" style="display:none;">1 kontakt</span>
</li>
</div></div>
<div id="right"><div class="praf">
<li class="requirement" id="requirement_2">
<h3 class="praw">SPR 2</h3>
<span class="fr drag prawy" style="display:none;">2 kontakt</span>
</li>
</div></div>
</div>

You can use .on('click', function(){}); and then inside this function you check to see if it's already visible or not. Take a look here
EDIT
As you want to be just the <h3> clickable, i made an adjustment in the code below, and now you need to cehck for the visibility of the h3 parent, because now the context of this is now h3 and no more the li
$(document).ready(function () {
$('.clickableH3').on('click', function () {
if ($(this.parentElement).find('span').is(":visible")){
$(this.parentElement).find('span').hide();
}else{
$(this.parentElement).find('span').show();
}
});
});
#wrap {
background: #e7e7e7;
padding: 0px;
text-align: center;
width: 100%;
}
#left, #right {
background: #ccc;
display: inline-block;
padding: 20px;
}
li {
list-style-type: none;
padding: 0px;
margin: 0px;
}
span.lewy {float:right; background:red; padding:20px;}
span.prawy {float:left; background:red; padding:20px;}
h3 {text-align:center;}
h3.praw {float:left;}
h3.lew {float:right;}
.calosc {max-width:500px; margin: 0 auto; border:1px solid red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
<div id="left"><div class="lef">
<li class="requirement" id="requirement_1">
<h3 class="lew clickableH3">SPR</h3>
<span class="fr drag lewy" style="display:none;">1 kontakt</span>
</li>
</div></div>
<div id="right"><div class="praf">
<li class="requirement" id="requirement_2">
<h3 class="praw clickableH3">SPR 2</h3>
<span class="fr drag prawy" style="display:none;">2 kontakt</span>
</li>
</div></div>
</div>

Well you see, in your js code, where you have "hover" ? Well you type "click" there instead ...

The jQuery hover function can have 2 parameters, which is your case. The first one for the hover, the second is for the unhover
So if you want to be able to close and hide on click I advise to use some css and use toggleClass. But if you wan to keep only javascript you can do like this:
$(document).ready(function () {
$('li.requirement').click(function () {
var $elm = $(this);
if( $elm.hasClass('showed') ){
$elm.find('span').removeClass('showed').hide();
}else{
$elm.find('span').addClass('showed').show();
}
});
});

JQuery Activate hover status using other element

I must to activate hover on an svg based element map.
So I got the map that can change color of a region hovering in selected region. Near this map I got a list of regions as link that must to highlight the relative region on the map hovering on that link.
Example Fiddle
https://jsfiddle.net/fgsh896b/
I got something like this:
Example
function mouseEnt(id) {
$('#' + id).trigger('hover');
}
.item {
width:100px;
height: 100px;
border: 1px solid #000;
position: relative;
margin-left: 10px;
float: left;
}
.item:hover {
background-color: #000;
}
#link {
top: 150px;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="1" class="item">
Item 1
</div>
<div id="2" class="item">
Item 2
</div>
<div id="link">
Link1
Link2
</div>
My function is wrong, I've tried with others jquery functions but maybe my logic is incorrect. how to reach this?

As #j08691 linked to in the comments on your question, you cannot cause a CSS :hover pseudo selector to fire by faking an event in JS.
However what you can do is set a class on the target element manually when you hover over the required link. To improve the logic you can use a data attribute to link them together and use an unobtrusive event handler, something like this:
$(function() {
$('#link a').hover(function() {
$('#' + $(this).data('rel')).toggleClass('hover');
});
});
.item {
width: 100px;
height: 100px;
border: 1px solid #000;
position: relative;
margin-left: 10px;
float: left;
}
.item:hover,
.item.hover {
background-color: #000;
}
#link {
top: 150px;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="1" class="item">Item 1</div>
<div id="2" class="item">Item 2</div>
<div id="link">
Link1
Link2
</div>

Adding div when clicking on anchor and removing div when clicking either outside of it or on a different anchor

I have two anchor tags that both display two different divs when clicked on but I only want to display one div at a time. I also want to hide the div that is displayed when clicking outside of it. I am almost done but when i click on the first anchor and then on the second both divs are displayed (I want one at a time).
Here is my code:
//Display and hide div number 1
$("a.number_1").on("click", function(event) {
event.preventDefault();
$(".display_div_1").toggle();
event.stopPropagation();
});
$(".display_div_1").on("click", function(event) {
event.preventDefault();
event.stopPropagation();
});
$(".body").on("click", function(event) {
event.preventDefault();
$(".display_div_1").hide();
});
//Display and hide div number 2
$("a.number_2").on("click", function(event) {
event.preventDefault();
$(".display_div_2").toggle();
event.stopPropagation();
});
$(".display_div_2").on("click", function(event) {
event.preventDefault();
event.stopPropagation();
});
$(".body").on("click", function(event) {
event.preventDefault();
$(".display_div_2").hide();
});
div.body {
background-color: white;
width: 100%;
height: 400px;
border: 1px solid grey;
}
div.display_div_1 {
display: none;
}
div.display_div_2 {
display: none;
}
ul {
margin: 0 0 30px 0;
padding: 0px;
}
li {
display: inline-block;
}
a.display {
display: inline-block;
background-color: lightblue;
padding: 10px 20px;
text-decoration: none;
}
div.display {
background-color: grey;
width: 100px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="body">
<ul>
<li>
Display div 1
</li>
<li>
Display div 2
</li>
</ul>
<div id="first" class="display display_div_1">
This is div 1!
</div>
<div id="second" class="display display_div_2">
This is div 2!
</div>
</div>
My jquery code was taken from the first answer from the post: https://stackoverflow.com/questions/30...
Thank you!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<H1>Blah</H1>
<div class="body">
<ul>
<li>
Display div 1
</li>
<li>
Display div 2
</li>
</ul>
<div id="1" class="display display_div_1">
This is div 1!
</div>
<div id="2" class="display display_div_2">
This is div 2!
</div>
</div>
</body>
With script
$( document ).ready(function() {
$('.number').click(function() {
$('div').hide(); //you can set a class on your divs and use that if you don't want to hide all divs
$('.body').show();
$('.number').show();
$('#' + this.id.substring(3)).show(); //show just the div you want to show
});
});

Found the answer in this post: Use jQuery to hide a DIV when the user clicks outside of it
$('a#div1').click(function() {
$("div#1").show();
});
$('a#div2').click(function() {
$("div#2").show();
});
$('a#div3').click(function() {
$("div#3").show();
});
$(document).mouseup(function (e)
{
var container = new Array();
container.push($('.display_div_1'));
container.push($('.display_div_2'));
container.push($('.display_div_3'));
$.each(container, function(key, value) {
if (!$(value).is(e.target) // if the target of the click isn't the container...
&& $(value).has(e.target).length === 0) // ... nor a descendant of the container
{
$(value).hide();
}
});
});
div.body {
background-color: white;
width: 100%;
height: 400px;
border: 1px solid grey;
}
div.display_div_1 {
display: none;
}
div.display_div_2 {
display: none;
}
div.display_div_3 {
display: none;
}
ul {
margin: 0 0 30px 0;
padding: 0px;
}
li {
display: inline-block;
}
a.display {
display: inline-block;
background-color: lightblue;
padding: 10px 20px;
text-decoration: none;
}
div.display {
background-color: grey;
width: 100px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<H1>Blah</H1>
<div class="body">
<ul>
<li>
Display div 1
</li>
<li>
Display div 2
</li>
<li>
Display div 3
</li>
</ul>
<div id="1" class="display display_div_1">
This is div 1!
</div>
<div id="2" class="display display_div_2">
This is div 2!
</div>
<div id="3" class="display display_div_3">
This is div 3!
</div>
</div>
</body>

Push down bottom divs when slideDown

I hope this is a simple question im trying to push down the divs on my bottom row when my new element slides down on click
heres a link to my fiddle
http://jsfiddle.net/abtPH/
heres my jquery
$('li').on('click', function(e){
$(this).find('.outer').slideToggle();
});
heres my html
<ul style="list-style: none;">
<li>
<div style="width: 156px; height: 156px; border: solid #cfcfcf 1px; padding: 10px; text-align: center; color: #cfcfcf;"> 156px X 156px</div>
<div class="outer">
<div class="inner">
</div>
</div>
</li>
</ul>
Any ideas on how to accomplish this?

Added jQuery UI for the duration on toggleClass.
http://jsfiddle.net/abtPH/3/
JS
$('li').on('click', function(e){
$(this).find('.outer').slideToggle();
$(this).toggleClass('active', 400);
});
CSS
.outer{position: absolute; width: 100%; background: black; top: auto; display: none; text-align: left;}
li.active {margin-bottom:100px;}