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

Initialize a hover state only once the mouse has clicked and moused out of the element

I have a simple link that toggles on each click. There's also a hover state that gets added to the link when it is in the 'clicked' state. See example below:
<style>
.added {
&:hover {
background-color: red;
}
}
</style>
<script>
$('a').on('click', function() {
var $link = $(this);
if ( $link.hasClass('added') ) {
$link
.removeClass('added')
.html('Add Me!')
} else {
$link
.addClass('added')
.html('Added');
});
</script>
<a href='#'>Add Me!</a>
The challenge here, is that I'd like the button not to turn red immediately after clicking 'Add Me!' (as the mouse is technically still hovering over the link). It should only turn red once I've clicked, moved off and then returned.
Is there a clean way to do this using either CSS and/or jQuery?

You can achieve this with jQuery's mouseout() function.
Here I've modified your existing code (with some minor fixes) to include a check on mouseout to add a .ready class:
$('a').click(function() {
var link = $(this);
if ( link.hasClass('added') ) {
link.removeClass('added').removeClass('ready').html('Add Me!');
} else {
link.addClass('added').html('Added');
// Check if .ready is applied already
if(!link.hasClass('ready')){
link.mouseout(function(){
link.addClass('ready');
});
}
}
});
and modified your SASS to include .ready:
.added.ready{
&:hover {
background-color: red;
}
}
You can see it in action on this fiddle: http://jsfiddle.net/easL77fa/

checking a class to toggle between background colours

I have replicated my issue in jsfiddle: http://jsfiddle.net/66UCX/
All I want to do is toggle between red and white when the user clicks on the td in a table. I have tried using an if statement to test for the background colour like so :
if($("#fbodytd_"+uid+"_"+row+"_"+col).css("background-color") == "rgb(255, 0, 0)"){
and that didn't work so I have tried adding and removing a class called 'active' and testing for that. Thanks.

You didn't make any binding on your function function changecream(uid, row, col).
Here is a working Fiddle:
$("table").on("click", "td", function(){
if($(this).hasClass("red")){
$(this).removeClass("red").addClass("white");
} else {
$(this).removeClass("white").addClass("red");
}
});
Edit:
Of yourse if you are only toggling between background color and a chosen color, you could simplify the "on click":
$(this).toggleClass("red");

You have to include jquery library
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
and your code look like this in $(document).ready function
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$('#button').bind('click', function(){
$(this).after('<span> click is active</span>');
$('span').fadeOut(1000);
});
$('#toggle').toggle(
function(){
$(this).text('rebind').removeClass('unbind').addClass('rebind');
},
function(){
$(this).text('unbind').addClass('unbind').removeClass('rebind');
}
);
if($("#toggle").hasClass("unbind")) {
$('#button').bind('click');
}
else {
$('#button').unbind('click');
}
});
</script>

If all you want is to simply change the background back and fourth (and maybe something else also). Add class like
.active
{
background-color: Red
}
and use a code like so:
$("table").on("click", "td", function() {
$(this).toggleClass("active");
});
Hope this helps.

If you are using jQuery anyway, the following simplified version should do:
$('table.bodymap td').click(function () {
$(this).toggleClass('active')
});
See this fiddle for a working example.

jQuery UI class switching of multiple elements

Im trying to make the divs change class from "normal" to "thin" ONLY if they have the class "normal". But somehow they just change back and forth, the IF statement seems to be written completely wrong :)
Here is the code
<div class="normal">1</div>
<div class="normal">2</div>
<div class="normal">3</div>
<div class="normal">4</div>
<div class="normal">5</div>
<div class="normal">6</div>
CSS:
.normal{
float:left;
height:200px;
width:100px;
border:1px dotted gray;
}
.thin{
float:left;
width:50px;
height:200px;
border:1px dotted gray;
background-color:#5a5a5a;
}
jQuery
$(document.body).click(function () {
$("div").each(function () {
if ($(this).hasClass("normal")) {
$(this).toggleClass("thin", 300); //Problem here?
} else {
this.style.color = "red";
}
});
});

#Egis as per your requirement the code should like below :
$(document.body).toggle(
function () {
$("div.normal").animate({
width: "50px",
}, "slow", function(){ $(this).addClass("thin"); });
},
function(){
$("div.normal").animate({
width: "100px",
}, "slow", function(){ $(this).removeClass("thin"); });
}
);
DEMO
I hope this is what you are looking for, Good Luck !!

ToggleClass (http://api.jquery.com/toggleClass/) will both add and remove the class. So instead, you want to remove the class "normal" and add the class "thin":
$(this).removeClass("normal").addClass("thin");
Regarding the animation, it looks like you are using the jQueryUI project (sorry I missed the tag, the first time around): http://jqueryui.com/toggleClass/ which allows you to specify an animation duration. With that in mind, you can include the durations:
$(this).removeClass("normal", 300).addClass("thin", 300);

You didn't remove the 'normal' class after you have first reached the code block of your if and your div will always have the 'normal' class, so your condition in your if will always be true.
Use removeClass for that purpose.
Also, if you want to change the class from 'normal' to 'thin', use the addClass for adding thin instead of toggle.
EDIT:
Maybe this is what you want:
$(document.body).click(function () {
$("div").each(function () {
if ($(this).hasClass("normal")) {
$(this).removeClass("normal");
$(this).addClass("thin");
}
else if ($(this).hasClass("thin")) {
$(this).removeClass("thin");
$(this).addClass("normal");
} else {
this.style.color = "red";
}
});
});

mouseover doesn't show hidden div

<script>
$("#menu-item-58").mouseover(function() { $("#simple_sidenav-3").css('visibility','visible'); });
$("#menu-item-58").mouseout(function() { $("#simple_sidenav-3").css('visibility','hidden'); });
</script>
#simple_sidenav-3 {
visibility:hidden;
}
simple_sidenav-3 is a hidden div.
So why doesn't it show when mouse is over #menu-item-58?
Please check it here http://mentor.com.tr/wp/?page_id=164

try this instead:
jQuery("#menu-item-58").mouseover(function() {
jQuery("#simple_sidenav-3").css('visibility','visible');
});
$ is undefined.

You haven't wrapped your code in the jQuery DOM ready function. Put this between your <script> tags:
$(document).ready(function()
{
$("#menu-item-58").mouseover(function() { $("#simple_sidenav-3").css('visibility','visible'); });
$("#menu-item-58").mouseout(function() { $("#simple_sidenav-3").css('visibility','hidden'); });
}
This will bind the mouse events to the elements when the document (page) has been loaded.

Try changing #simple_sidenav-3 from visibility:hidden; to display:none; Then call something like .slideDown() for a nice effect.
Also, here's some improvements to your code:
jQuery(function() { //waits till the document is ready
jQuery("#menu-item-58").mouseover(function () {
jQuery("#simple_sidenav-3").slideDown();
}).mouseout(function () { //no need to use $("#menu-item-58") twice
jQuery("#simple_sidenav-3").slideUp();
});
});