We Keep Coding

Mouse out event doesn't move back outside the button

I have a button and when you hover over it, it shows some text and 2 more buttons but when I move my mouse out of it, it still stays on the hover. How do I make my code work so that it works on mouse out?
This is my Javascript:
var option1Button_Mouseout = function() {
console.log('option1Button_Mouseout()');
$('laStyle-option1-button')[0].innerHTML = outputTag;
};
var attachOption1ButtonListeners = function() {
console.log($('laStyle-option1-button')[0]);
$('laStyle-option1-button')[0].addEventListener('mouseover', this.option1Button_Mouseover);
// When you mouse out of the button it brings it back to the original
$('laStyle-option1-button')[0].addEventListener('mouseout', this.option1Button_Mouseout);
};
window.onload = function() {
this.attachOption1ButtonListeners();
};
this is what it currently looks like:
https://media.giphy.com/media/9A6MoIdWBiZVFtcHyW/source.mp4
See when I hover over it it shows text and 2 buttons, when I mouse out it should go back to the picture of the hand.

Sind it is not clear what your methods are doing, consider this example:
HTML
<div id="myDiv">
<div id="myDiv1"/>
</div>
JavaScript
$('#myDiv').on("mouseover mouseenter ", function (e) {
$("#myDiv1").show();
});
$('#myDiv').on("mouseleave mouseout", function (e) {
$("#myDiv1").hide();
});
When entering the parent div the inner div will be shown. When leaving the parent div the inner div will be hidden. Also using .on as you are using jquery.
Here is the JSFiddle: https://jsfiddle.net/GR8sk/21/

Since you're already using jQuery I would use its Mouseenter and mouseleave events like so:
$("document").ready(function(){
$(".laStyle-option1-button img").mouseenter(function(){
$(this).attr('src','https://media.giphy.com/media/xUOwGdPZ0chBWiQ6Ri/giphy.gif');
});
$(".laStyle-option1-button img").mouseleave(function(){
$(this).attr('src','https://media.giphy.com/media/l4pTgiQB2e2dpuKs0/giphy.gif');
});
});
Couple things to note:
You did not add a '.' to the beginning of your jQuery reference to laStyle-option1-button (look at how the period goes before) because its a class attribute.
You are performing unnecessary event listener loading. While this can be helpful for binding to click events, I would just use the 'bind' method to bind functions to click events:
$( "#btnButton" ).bind( "click", myFunction);
You need to change either the 'src' attribute of the image, or just remove the button completely and replace with another one. The former is better performing.

Animate icon don't take his original position on toggle click

I have a accordion menu which have for each parent menu a icon, and this icon is animated with css transition and transform. I added a class with a if condition to the click event. The problem is that when I click for example on Menu1, the icon animation does very well, but if I click directly on Menu2, the menu2 dropdown appear but icon from the menu1 don't take his original position.
This problem applies to each icon in each menu/submenu, I thinks that I have a mistake in my code.
$(document).ready(function() {
// Icons effect
$('#mw_nav .toggle').click(function() {
if($(this).hasClass('rotate_close'))
{
$(this).addClass('rotate_open').removeClass('rotate_close');
}
else {
$(this).addClass('rotate_close').removeClass('rotate_open');
}
});
// Toggle Menu Items
$(function () {
$("#m_nav > ul ul").hide();
$('#m_nav .toggle').click(function (e) {
e.preventDefault();
e.stopPropagation();
var $parentli = $(this).closest('li');
$parentli.siblings('li').find('ul:visible').slideToggle(400);
$parentli.find('> ul').stop().slideToggle(400);
$(this).remove;
});
});
});
FIDDLE
Any help would be appreciated

There are 2 issues I see with your code. The first is a recommendation to NOT have $(function() { // your code }) inside of $(document).ready(). $(function() {}) is actually just shorthand for $(document).ready() so you are adding code you do not need.
The second is an issue with your logic.
$('#mw_nav .toggle') and $('#m_nav .toggle') click listeners are essentially adding a click listener on the same exact element, but both run different logic. When the $('#mw_nav .toggle') click listener is getting called it checks for a class to exist to decide what class it needs to remove and add. When $('#m_nav .toggle') click listener is getting called it calls a slideToggle function on the current nested <ul> regardless if another menu is opened or closed and there is no check in place of whether or not the rotate_open/rotate_close classes exist allowing for the classes to get swapped. There is no relation between the swapping of rotate_open/rotate_close classes and the logic that slideToggles <ul> up/down.
UPDATE
I have edited your code and made updates that will now work seen here: https://jsfiddle.net/vhfn0q5a/9/
I have added a class of .top_level to the top level items in your HTML. I use this as a way of differentiating the top level <li> from the sub menus. Next, at the end of the click event listener I check to see if the .toggle element clicked is a top level element, if so I target all top level elements that are not the current selected and make sure they have the .rotate_close class.
$(function() {}) shorthand reference

Use this code in your first click handler:
$('#mw_nav .toggle').click(function() {
$(this).toggleClass('rotate_close rotate_open');
if ($('#mw_nav .toggle').not(this).hasClass('rotate_open')) {
$('#mw_nav .toggle').not(this).removeClass('rotate_open').addClass('rotate_close');
}
});
I've updated your FIDDLE with an working example.
Cheers!

turning div boxes into hotlinks, without overwriting the buttons they already have - JQuery

I am trying to turn the whitespace inside the pink boxes you see below into links associated with each object. I have been trying to just make the box clickable to google.com, and numerous tries do not swap the appropriate element. My most recent attempt is looks as follows, where the first jquery function of hovering over "article" does work, but the new one below it doesn't. The page is as follows:
https://jsfiddle.net/codyc54321/zpLy3og8/1/
$( ".linkbox" ).hover(
function() {
$( this ).attr("href", "www.google.com")
}, function() {
$( this ).attr("href", "#")
}
);
I need the Archive/Edit/Delete buttons to retain their functionality, even though the sit within the larger pink box. How can I make this box clickable without overriding my other 3 buttons using jquery?

You will need to stop propagation on click of your anchor to avoid to events firing. Like below:
$('a').click(function(e){
e.stopPropagation();
});
To activate click on your outer div, you may add the below function:
$('.article-link').on('click',function(){
// Do something
});
Wrap both these function inside document.ready and you are good to go.

jquery click not working on dynamically added hrefs in IE11

Hello I have some links in my HTML code. I want to change the href property of each link on hover and then on clicking this link I want to open it up in a new tab. The code is as follows:
$('.identifierClass').hover(function(e) {
if(condition) // is true
{
$(element).attr("href", "url/goes/here").off().click(function(e) {
$(element).attr("target", "_blank");
});
}
});
Everything is working properly in Chrome/Firefox, however, on clicking the link in IE 11 it simply hangs and click wont work.
Any help is appreciated.

You need to bind to a static or preexisting element that the dynamic elements will be created inside of:
$(document).on('mouseenter','.identifierClass',function(e) {
if(condition) // is true
{
$(element).attr("href", "url/goes/here").attr("target", "_blank");
}
});
Edit: here is a fiddle of it and I also had to use 'mouseenter' instead of 'hover' when using the string name for the event. jquery .hover() documentation
In the fiddle i show you two divs being added dynamically:
$('#place').html('<div class="identifierClass">hover1</div><div class="identifierClass2">hover2</div>');
Above that, I set my event handlers, for hover1 div, I set the event on the document using a specified selector:
$(document).on('mouseenter','.identifierClass',function(e) {
alert('hi');
});
You can see this works when you hover of 'hover1' text on the right and, conversely, you can see hover2 doesn't work using this binding:
$('.identifierClass2').hover(function(e) {
alert('hi2');
});
here is a link to the jquery documentation on event delegation.
Edit2: I updated the fiddle to address the 'href' manipulation. It appears that you just want to change some attributes on the hover portion:
I modified the 'mouseenter' binding to look like this:
$(document).on('mouseenter','.identifierClass',function(e) {
alert('hi'); $('#someLink').attr('href','http://www.bing.com').attr('target','_blank');
});
I don't think you need the 'off' or the 'click', but that is based off of some assumptions, so please feel free to comment and I can update accordingly. This, though, will change the href when the mouseenters the dynamic element and change the target attribute as well.

D3 remove click events from one element out of a selection

I have a class in D3 say: selectors and I need to remove the click event from the selection
d3.selectAll('.selectors').on('click',function(){
//Remove the currently clicked element from the selection.
});
Ive got two problems:
The removed element is supposed to be moved to a different part of the page and the I need the click event on it to be removed.
Also, would it be possible to reinsert the removed element into the selection on doing something else, like clicking on the removed element again?
Edit:
Found a solution for problem 1
d3.selectAll('.selectors').on('click',function(){
//Remove the currently clicked element from the selection.
d3.select(this).on('click',null);
});
Is this the right way? Or is there a more graceful method?
A Demo Fiddle

here is the updated jquery it will work for your case
$(document).ready(function(){
$(document).on('click','.selectors',function(e){
//$(document).off( 'click','.selectors');
if(e.target.onclick==null)
{
e.target.onclick=
function(){
void(0);
};
alert('test');
console.log('Hello');
}
});
});

For problem 1, the best method(as far as I know) is to redefine the click event in D3 itself:
d3.selectAll('.selectors').on('click',function(){
//Remove the currently clicked element from the selection.
d3.select(this).on('click',null);
});
For problem 2, however, once you turn a click event callback to null, the only way is to redefine the click event again, perhaps recursively:
function clickDefine() {
d3.selectAll('.selectors').on('click', function () {
//Remove the currently clicked element from the selection.
console.log('Hello')
d3.select(this).on('click', null);
setTimeout(function(){clickDefine();},1000)
});
}
This function makes the click event inactive for 1 second on click. And reactivates this again. I'm hoping this is an effective solution.