We Keep Coding

is(":hover") only working within a setInterval function

Please see https://jsfiddle.net/cot33dxa/
setInterval(function() {
if ($("#one").is(":hover")) {
$("#one").css("background-color", "red");
} else {
$("#one").css("background-color", "");
}
}, 0);
if ($("#two").is(":hover")) {
$("#two").css("background-color", "blue");
} else {
$("#two").css("background-color", "");
}
#one {
width: 200px;
height: 200px;
background-color: yellow;
}
#two {
width: 200px;
height: 200px;
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="one"></div>
<div id="two"></div>
Why is it that for div one, the hover check works just fine, whereas it doesn't in div two?
I have the same issue when using if ($('#element:hover').length != 0) (taken from ivo's solution).
JS fiddle for that: https://jsfiddle.net/q8dfLc6s/
In a more general sense, I am looking for the simplest, most reliable way to know if the mouse is over a div in JQuery 1.11.0. As it stands, I can't even get the boolean check to work at all aside from this SetInterval oddity.

The problem with your fiddle is that your second check is outside of your interval function. Try this:
setInterval(function(){
if($("#one").is(":hover")) {
$("#one").css("background-color","red");
}
else {
$("#one").css("background-color","");
}
if($("#two").is(":hover")) {
$("#two").css("background-color","blue");
}
else {
$("#two").css("background-color","");
}
},0);

The scond one doesn't work because it's not inside the interval timer and that code only runs on page load therefore
Change to
setInterval(function () {
if ($("#one").is(":hover")) {
$("#one").css("background-color", "red");
} else {
$("#one").css("background-color", "");
}
if ($("#two").is(":hover")) {
$("#two").css("background-color", "blue");
} else {
$("#two").css("background-color", "");
}
}, 0);
I have no idea why you need this and don't just use hover events or hover css
DEMO

Good question! By putting your code in a setInterval you are essentially mirroring what the browser is doing in the background in the event loop.
This behavior should generally be avoided and instead replaced by an actual event.
in jQuery this would look like:
$('#element').on( 'hover', function (this, event) {
$element = this;
/*handle event*/
});
More here: https://api.jquery.com/on/
Edit: The code you are running would be best done in CSS using the :hover selector as such:
#element {
background-color: blue
}
#element:hover {
background-color: red
}

Instead of moving your code inside setInterval:
the reason why your second example 'doesnt work', is the fact that it will execute only once the page has loaded. setInterval on the other hand, executes every ~0s which 'works'.
However to achieve what you're trying to do, consider to use .hover() as it is listening for the actual event of moving the cursor in or out of the selector and will not execute your else block all of the time:
$(function() {
$("#two").hover(function() {
$("#two").css("background-color","blue");
}, function() {
$("#two").css("background-color","");
});
});
jsfiddle

jQuery mouseover functionality not working properly

On hover functionality is not moving perfect. This is my code and when a mouse is placed over Details* text then whole div color changed to black. But the functionality is not working fine. I want whenever mouse is placed over details text then it should call the hover function but right now its not working fine. Any recommendations?
$('#disclaimer').hover(
function () {
$('#wrapper').addClass('hovered');
}, function () {
$('#wrapper').removeClass('hovered');
}
);

Try this :
script :
$('#disclaimer').hover(
function () {
$('#wrapper').addClass('hover');
}, function () {
$('#wrapper').removeClass('hover');
}
);
style :
.hover {
display : block;
background-color : black;
}
/* new css */
.hover #Image_Car { display: none; }
.hover #ctaBtn { display: none; }
.hover #Image_logo { display: none; }
.hover #headlineText { display: none; }
Fiddle : http://jsfiddle.net/U4EF8/7/

$("#searchput").hover(function() {
$('#wrapper').addClass("hover");
}, function() {
$('#wrapper').removeClass("hover");
});

Here is the Code :
$(document).ready(function(){
$( "#disclaimer" )
.mouseover(function() {
$('#wrapper').addClass('hovered');
})
.mouseout(function() {
$('#wrapper').removeClass('hovered');
});
});
and my html is :
<div id="wrapper"></div>
<div id="disclaimer" style="border:1px solid black;">
hello
</div>
Here is the working example : http://jsbin.com/heduqesu/2/edit , you can check in console that class is added and removed on mouse enter and mouse leave event . Hope this helps . Cheers!

did you already try this ?
$('#disclaimer').mouseenter(
function () {
$('#wrapper').addClass('hovered');
}
);
$('#disclaimer').mouseleave(
function () {
$('#wrapper').removeClass('hovered');
}
);
or with pure css
#disclaimer:hover {
//put any attribute on "hovered" class here
}
or maybe i don't understand your question enough.

How to 'toggle' click multiple elements on page in JQuery?

Lets say I have 10 with red color on my page, and they have same class which is called 'myspan'.
Here is what I want:
Click an element, and then the clicked one change its color to green.
what I did:
<script>
$(document).ready(function(){
$('.myspan').click(function(){
aaa = !aaa;
if(aaa){
$(this).css('color','green');
} else {
$(this).css('color','red');
}
});
})
</script>
This works! It almost achieve what I want. When I click one element, it changes to green successfully. But I have to click twice for another red element to make it green. I hope you guys know what I mean if you watch the code. Does anyone have any idea about how to solve the problem?

You can use .toggleClass() instead.Try this:
$(".myspan").click(function () {
$(this).toggleClass("red");
});
CSS:
.myspan{ color: green; }
.myspan.red{ color: red; }
Working Demo

You need to have a state for each span separately so instead of using a common variable you can use the .data() api like
$(document).ready(function () {
$('.myspan').click(function () {
var $this = $(this),
aaa = $this.data('aaa');
aaa = !aaa;
$this.css('color', function () {
return aaa ? 'green' : 'red';
})
$this.data('aaa', aaa);
});
})
Demo: Fiddle

I would not use any variable, as long as your script's function is going to say that simple. Better try it like this:
Javascript:
$(document).ready(function () {
$('.myspan').click(function () {
if ($(this).hasClass('color-red')) {
$(this).removeClass('color-red').addClass('color-green');
} else {
$(this).removeClass('color-green').addClass('color-red');
}
});
})
CSS:
.myspan {
}
.color-red {
color:red;
}
.color-green {
color:green;
}
Working Fiddle: http://jsfiddle.net/2729p/
This saves the need to use a state saving variable and makes it more modular.

Try below code
<script>
$(document).ready(function(){
$('.myspan').click(function(){
var colorVal = $(this).css('color');
if(colorVal === 'red'){
$(this).css('color','green');
} else {
$(this).css('color','red');
}
});
})
</script>

You would be better off using toggleClass
<span class="myspan">Test</span>
JQuery:
$('.myspan').click(function () {
$(this).toggleClass("green");
});
CSS:
.myspan{
color: red;
}
.green {
color: green
}
Example

reverse an onclick function

So this is pretty basic stuff but I'm awful with javascript.
I'm working on the following page: http://mockingbirdagency.com/thebox/bettercss/login-1.html
with the following function.
<script type="text/javascript">
$(document).ready(function() {
$('#button-sign-up').click(function() {
$(this).css("margin-top","10px");
$('#details').toggle(500);
$('#container-bloc-center').css("height", "290px")
});
});
</script>
When I click on the button again,I'd like it to go back to its original position, how can I do that ?!

We cannot easily tell you how to reverse changes to CSS if we don't know the original state of the CSS.
In your CSS if you set up your defaults for margin-top and height of your two elements:
#button-sign-up { margin-top:0px; }
#container-bloc-center { height:25px; }
And also give them an alternate class:
#button-sign-up.active { margin-top:10px; }
#container-bloc-center.active { height:290px; }
Then in your script you could just toggle the active class:
$(document).ready(function() {
$('#button-sign-up').click(function() {
$(this).toggleClass("active");
$('#details').toggle(500);
$('#container-bloc-center').toggleClass("active");
});
});

Jquery: Small bind hover/unbind snippet of code, few lines long, don't know what's wrong

I've created DIV.cb-toggle, when the user hovers over this div, it animates to Orange, when they hover off of this div, it animates back to gray, when the user clicks this div, it animates to blue, telling the user that it's been selected. So when it's NOT selected, it has mouseenter mouseleave animations, but when it's selected i want to unbind these events, I DO NOT want the hover event to work when it's been selected, only when it's not selected. What's the best way to do what i'm trying to accomplish? I came up with the code below but i'm pretty sure this is a horrible way to do it and i don't know what to do. thank you so much for any help.
my code:
$('.cb-toggle').toggle(function() {
$(this).animate({"background":"blue", "color":"#fff;"});
$(".cb-toggle").unbind("click.myfadee");
}, function() {
$(this).animate({"background":"gray", "color":"#fff;"});
$('.cb-toggle').trigger('mouseenter');
});
});
and I'm calling this bind:
$(".cb-toggle").bind("click.myfadee", function(){
$(".cb-toggle").mouseenter(function() {
$(this).animate({"background":"orange", "color":"#fff;"});
}).mouseleave(function() {
$(this).animate({"background":"gray", "color":"#fff;"});
});
});
I need to keep the background color animation, it needs to fade.

I would use CSS for the styling to simplify your whole setup without un/re-binding, like this:
.cb-toggle { background: blue; color: #fff; }
.cb-toggle.active { background: gray; }
.cb-toggle.active:hover { background: orange; }
Then you can do just this:
$('.cb-toggle').click(function() {
$(this).toggleClass("active");
});
This approach also lets you offload all styling, colors, etc to the CSS, meaning no JavaScript changes are needed when you decide to tweak the colors or any other styling :)
Or, if you need to support IE6, add a .live() handler for the hover that triggers on only the ones with the .active class, like this:
$(".cb-toggle.active").live('mouseenter', function() {
$(this).addClass('hover');
}).live('mouseleave', function() {
$(this).removeClass('hover');
});
With matching CSS:
.cb-toggle.active.hover { background: orange; }

You should probably just use a selected class. Also I'd recommend against using any of the .css() calls you have here. Just use classes.
$(".cb-toggle").bind("click.myfadee", function(){
$(this).toggleClass('selected');
});
$('.cb-toggle').toggle(function() {
var $this = $(this);
if ( $this.is('.selected') ) {
$this.css({"background":"blue", "color":"#fff;"});
}
}, function() {
var $this = $(this);
if ( $this.is('.selected') ) {
$this.css({"background":"gray", "color":"#fff;"});
}
});