We Keep Coding

Jquery mouseenter cant' see when out from span to fire again

If I have something like this
<div id='one'>xyz
<span id='two'>abc</span>
</div>
I want to be able to hover element one, then element two then one again
but jquery can't recognize the when i'm leaving two, im actually re-entering one
I need/expect to be able to fire an event when i'm re-entering one
Is it possible to achieve this without modifying the html markup of the page (I can't touch it!)

I think below code is helpful to you
#one{
width:100px;
height:100px;
position:relative
}
#one:hover{
width:150px;
height:160px;
background-color:red;
}
#two{
width:100%;
position:absolute;
height:100px;
}
#two:hover{
width:100px;
background-color:green;
height:100px;
}
<div id='one'>xyz
<span id='two'>abc</span>
</div>

You can try something like the following:
$('div#two').bind(('mouseenter, mouseleave'), function(event) {
event.stopPropagation();
});
$('body').on('mouseenter', '#one', function(e){
console.log('You entered: ', $(this).attr('id'));
}).on('mouseleave', '#one', function(){
console.log('You left: ', $(this).attr('id'));
});
$('body').on('mouseenter', '#two', function(){
console.log('You entered: ', $(this).attr('id'));
}).on('mouseleave', '#two', function(){
console.log('You left: ', $(this).attr('id'));
});
#one{
background-color: red;
}
#two{
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='one'>xyz
<span id='two'>abc</span>
</div>

When you enter two you actually never leave one, because two is inside one only. So, mouseenter event of one will never get triggered when you enter its' descendants.
You can probably distinguish it, by attaching mouseenter event on all the descendants of one, to track mouseleave from one, alongwith mouseleave event on one
$("#one").mouseenter(function(){
//Entering one
});
$("#one").children().mouseleave(function(){
//Entering one again
});

when mouse is in #two or #one ,it has just mouseenter event,because mouse don't leave #one.
Try this:
$(document).ready(function(){
$('#two').hover(function(){
$('#one').toggleClass('newCss');
},function(){
$('#one').toggleClass('newCss');
})
$('#one').hover(function(){
$(this).toggleClass('newCss');
})
})
$(document).ready(function(){
$('#two').hover(function(){
$('#one').toggleClass('newCss');
},function(){
$('#one').toggleClass('newCss');
})
$('#one').hover(function(){
$(this).toggleClass('newCss');
})
})
#one {
width: 200px;
height: 200px;
padding: 30px;
background-color: red;
}
#two {
width: 100px;
height: 100px;
background-color: blue;
padding: 30px;
}
#two:hover {
background-color: orange;
}
.newCss {
background-color: green!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id='one'>xyz
<span id='two'>abc</span>
</div>

Toggle/add/remove class in Jquery not working as expected

In my code i have two boxes, i want when i click on the box it should gain some width and when i click on another box it should gain the width and remove the extra width from previous box. I have done this successfully but when i click the extra width box again it does not removing it's extra width.
$('.dos').click(function() {
$(this).toggleClass('clicked');
});
$('.dos').click(function() {
$('.dos').removeClass('clicked');
$(this).addClass('clicked');
});
#box {
width: 100px;
height: 100px;
border: 1px solid #ccc;
transition: width 1s;
}
#box.clicked {
width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box" class="dos"></div>
<div id="box" class="dos"></div>
Just want toggle class should also work with addClass and removeClass
(Demo on jsfiddle.net)

Check the updated fiddle and try
$(this).toggleClass('clicked').siblings().removeClass('clicked');
Demo
$('.dos').click(function() {
$(this).toggleClass('clicked').siblings().removeClass('clicked');
});
#box {
width: 100px;
height: 100px;
border: 1px solid #ccc;
transition: width 1s;
}
#box.clicked {
width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box" class="dos"></div>
<div id="box" class="dos"></div>

You don't need to play with adding/removing classes. Here is the new fiddle
Edit your jQuery code with this, I have just added a boolean variable:
var toggle = false;
$('.dos').click(function() {
toggle = !toggle;
if (toggle) {
$(this).toggleClass('clicked');
}
});
$('.dos').click(function() {
toggle = !toggle;
if (toggle) {
$('.dos').removeClass('clicked');
$(this).addClass('clicked');
}
});

You are removing the class from the clicked button as well, if you want to achieve it you'll need to ignore the one clicked while removing the class
$('.dos').click(function() {
$('.dos').not(this).removeClass('clicked');
$(this).toggleClass('clicked');
});

Solution is as below:
You was trying to toggle already toggled div. Plus always use unique ids in your code :)
$('.dos').click(function() {
var out = this;
$( ".dos" ).each(function( index ,element ) {
console.log(element);
if($(element).attr("id") != $(out).attr("id")){
$(this).removeClass('clicked');
}
});
$(this).toggleClass('clicked');
});

Targetting specific jquery element which have identical class names

I have several divs which are generating dynamically which share same class names, If I hover on parent(myDiv) need to trigger an event and on hover need to add a class to myDiv(child button) and once I clicked on parent div(myDiv) need to unbind hover action?
<div class="myDiv">
<div class="myBtn"></div>
</div>
<div class="myDiv">
<div class="myBtn"></div>
</div>
<div class="myDiv">
<div class="myBtn"></div>
</div>
Tried in the below way
$(document).on('click', '.myDiv', function() {
//some task will goes here
$(this).unbind('hover');
}).hover(function() {
$(this).find('.myBtn').css('background','#666666');
});

I believe what you are looking for is the .off() function.
Here is the jsFiddle link.
JavaScript:
$(document).on('click', '.myDiv', function() {
//some task will goes here
$(this).off();
});
$('.myDiv').hover(function() {
$(this).find('.myBtn').toggleClass('active');
});
CSS:
.myDiv {
display: block;
height: 100px;
width: 100px;
background-color: red;
}
.myBtn {
display: block;
height: 50px;
width: 100px;
background-color: white;
}
.active {
background-color: gray;
}
I hope this helps.

jQuery toggleClass doesn't switch class

i've been trying to understand toggleClass function by making this simple script, yet it didn't work the way I expected it to.
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<style type="text/css">
body {
font-family: "Kozuka Gothic Pro";
}
.red {
background: red;
}
.blue {
background: blue;
}
div {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="blue"></div>
<script>
$("div").click(function() {
$(this).toggleClass("red");
});
</script>
</body>
However, if i changed the div class to red and the toggleClass argument to "blue" it works, can anybody explain me this? I'm hoping to hear from you. Thanks in advance!

You need to add both blue and red class in toggleClass function to change both like,
$("div").click(function() {
$(this).toggleClass("red blue");
});
$("div").click(function() {
$(this).toggleClass("red blue");
});
body {
font-family: "Kozuka Gothic Pro";
}
.red {
background: red;
}
.blue {
background: blue;
}
div {
width: 200px;
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="blue"></div>
What happens when you use only red in togleclass function then it will applied but the change would not overwrite because of the blue class and the blue background shown as it is. So, if you want your code to work then in that case you need to use !important in red-background like,
.red {
background: red !important;
}
$("div").click(function() {
$(this).toggleClass("red");
});
body {
font-family: "Kozuka Gothic Pro";
}
.red {
background: red !important;
}
.blue {
background: blue;
}
div {
width: 200px;
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="blue"></div>
Note that I am just informing you (by second alternative) why your code was not working. You must go with my first option.

$("div").click(function() {
$(this).toggleClass("red");
$(this).toggleClass("blue");
});
body {
font-family: "Kozuka Gothic Pro";
}
.red {
background: red;
}
.blue {
background: blue;
}
div {
width: 200px;
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blue"></div>
$("div").click(function() {
$(this).toggleClass("red");
$(this).toggleClass("blue");
});

Try this : pass both red and blue class, it will remove if present and add if not. So for first time it will add red but will remove blue.
$("div").click(function() {
$(this).toggleClass("red blue");
});

The toggleClass() method toggles between adding and removing one or more class names from the selected elements.
This method checks each element for the specified class names. The class names are added if missing, and removed if already set - This creates a toggle effect.
Explanation Below
it act as - if div have class "red" then REMOVE class "red" else ADD "red" class from div

The problem arises due to order of the css styles, as last css style will affect the output, so as css on class blue is declared last, so blue class is given precedence over red class.
So, to solve this, you should try to have only one class on the div, so that the order of the css should not matter.
$("div").click(function() {
$(this).toggleClass("red blue");
});

The toggleClass() will remove the class if it is assigned to the element, or it will add it if it is not assigned to the element. Try this snippet as a demo:
$(document).ready(function() {
$("div").click(function() {
if ($(this).hasClass("red")) {
alert("I am red! I'm turning red off.");
$(this).toggleClass("red");
} else if ($(this).hasClass("blue")) {
alert("I am blue! I'm turning blue off.");
$(this).toggleClass("blue");
} else {
alert("I am blank! Turning red on.");
$(this).toggleClass("red");
}
});
});
body {
font-family: "Kozuka Gothic Pro";
}
.red {
background: red;
}
.blue {
background: blue;
}
div {
width: 200px;
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="blue"></div>

Make text fade in and stay visible until mouse leaves the container

I'm tying to make text fadeIn and stay visible while the mouse pointer is in the container and only when the mouse pointer leaves the designated area, only then must the text fadeOut but for some reason its not working, the text will fadeOut even when the mouse is inside the container.
I'm using Jquery lib 1.10.1 as well as Jquery ui 1.11.0
Here is the code:
HTML
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<div class="hold">
<div class="conti">
<div class="arrow-right"></div>
</div>
<div class="text-fade"></div>
</div>
CSS
.hold{
width: 142px;
background: yellow;
overflow: hidden;
padding:10px;
}
.conti{
width: 30px;
}
.arrow-right {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid green;
}
.text-fade{
display: none;
float: right;
margin-top:-30px;
margin-left: 10px;
margin-right:10px;
}
JS
$('.hold').mouseenter(function () {
$('.arrow-right').effect("bounce", { direction:'right', times:3 }, 700);
$('.text-fade').text("this is a test text").fadeIn(1000).css('display',"block");
});
$('.hold').mouseout(function () {
$('.text-fade').fadeOut(1000);
});
This is the link to my fiddle example

mouseout is triggered by children, use mouseleave instead
$('.hold').mouseenter(function () {
// var d = $('.arrow-right');
// d.effect("bounce", { direction:'right', times:3 }, 700);
$('.text-fade').text("this is a test text").fadeIn(1000);
});
$('.hold').mouseleave(function () {
$('.text-fade').fadeOut(1000);
});
JS fiddle updated

Put the text directly into ".text-fade" and give some transition to the ".text-fader" class. Then change the text color via JS.
Here's the code for changing from #FFFFFF to #000000 and back again:
$('.hold').mouseenter(function () {
$('.arrow-right').effect("bounce", { direction:'right', times:3 }, 700);
$('.text-fade').css('color', '#000000');
});
$('.hold').mouseout(function () {
$('.text-fade').css('color', '#FFFFFF');
});

You are using the wrong functions, its mouseenter() and mouseleave()
working fiddle here
your javascript
$('.hold').mouseenter(function () {
$('.text-fade').text("this is a test text");
$('.text-fade').fadeIn(1000);
$('.text-fade').show();
});
$('.hold').mouseleave(function () {
$('.text-fade').fadeOut(1000);
});
also that bounce function you had seems to cause some problems that I could not find out why so I removed it