Develop Reference

if condition checking two selectors for hover, if hover, text line underline

Simplified update, nevermind using a variable. (original question was using one selector as a variable and doing this)
Essentially why will below not work.
Note:: When not declaring || aka second selector this worked fine. But then what it does is doesn't allow the once css natural :hover method on the text, so that is why I'm trying to add the second selector here in the first place. I need to hover an image, and the see the corresponding text link hover, and I also need to maintain hovering over corresponding text link alone to have the hover underline effect. Any suggestions as how to get here if this cannot done with CSS / sass nor using :hover in jQuery as a stable option?
setInterval(function(){
if $("#t1").is(":hover") || $(".thumba").is(":hover")) {
$(".thumba").css("text-decoration", "underline");
}
else {
$(".thumba").css("text-decoration", "none");
}
}, 200);
setInterval(function(){
if $("#t2").is(":hover")) || $(".thumbb").is(":hover")) {
$(".thumbb").css("text-decoration", "underline");
}
else {
$(".thumbb").css("text-decoration", "none");
}
}, 200);
Another example:
You have an image, say image a.)
<img src="[ image a ]">
then you have a paragraph with some text:
<div>blahblahloremipsum clickhere blachhhhhhh</div>
I want to hover over image a and allow click here to have an underline, I would like to 'hover out' and the underline to go away. I would also like this not only on the image but as standard with the text link, basically if you hover over click here and not the image it still will underline.
Another attempt: (but here the underline doesn't unattach after mouse is no longer hover)
$(document).mousemove(function() {
if($('#t1').is(':hover') || $('.thumba').is(':hover')) {
$('.thumba').css({'text-decoration':'underline'});
}
else {
$('.thumba').css({'text-decoration':'none'});
}
});
$(document).mousemove(function() {
if($('#t2').is(':hover') || $('.thumbb').is(':hover')) {
$('.thumbb').css({'text-decoration':'underline'});
}
else {
$('.thumbb').css({'text-decoration':'none'});
}
});
take a look: here (link below) it describes using it if ONE instance, this is why it's likely failing for me and is not the solution; but I don't see a solution on this thread for multiple. "(This only works when the selector matches only 1 element though - See Edit 3 for more)"
Detect IF hovering over element with jQuery

You need to add another parenthesis at the end, as well as remove one after the first condition:
if($thumbone.is(":hover") || $('.thumba').is(":hover")) {
And you might want to refer to this question for checking for hover:
Jquery condition check is(':hover') not working

You can achieve the underline on hover effect on the text link just using CSS:
.thumbb:hover,.thumbb-hover {text-decoration:underline;}
Then you detect the mouseenter and mouseleave events on the images:
$('#t1,#t2')
.on('mouseenter', function() {
$('.thumbb').addClass('thumbb-hover');
})
.on('mouseleave', function() {
$('.thumbb').removeClass('thumbb-hover');
});
Here's a working fiddle. And here's a fiddle with two images

A.O. is right, check the parenthesis. Also, everytime I use jquery on html classes, I make sure I grab the first one. It is the default functionality, but it's always nice to explicitly declare it.
if($thumbone.is(":hover") || $('.thumba').first().is(":hover")) {

Jquery if else statment for tooltip

I have a tooltip that appears when you mouseover a link. I want the tooltip to stay if you hover over it (because there are links and such in it), or disappear if you mouse away from the link.
I tried a couple things, but haven't figured it out. This is my first time building anything serious with jQuery.
The stuff below is what is in the .hover() 'handlerOut' event.
if($(this.a).mouseout())
{
if ($('.tip_container').hover()) {
$('.tip_container').css('display', 'block');
$('.tip_container').mouseleave(function() {
$('.tip_container').remove(0);
});
} else if ($('.tip_container').hover() == false && $(this.a).mouseoff() == true)
{
$('.tip_container').remove(0);
}
}
>>"this.a" refers to the link<<
With this and the other things I've tried the tooltip doesn't disappear unless you mouse over the off of it. I also tried
else if (!$('.tip_container').hover() && $(this.a).mouseoff()) {
Is it possible to have multiple conditions?
The main idea of the code is that if you mouse off of the link "this.a" the tooltip will be removed by:
$('.tip_container').remove(0);
but if you mouse over the tooltip it will not be removed until you mouse off of the tooltip.

Do you have a fiddle or anything to demonstrate?
Maybe something like
$(this, '.tip_container').hover(function () {
$('.tip_container').show();
}, function () {
$('.tip_container').hide();
}
);
Basically bind both the link and the tooltip elements to the hover method, which hides/shows the tooltip element on mouseenter/mouseleave. The link Pointy posted in comments is a good place to start

After a good nights rest and ignoring it for a while I figured out a solution. This is what I put in the hover handlerOut event.
var timer;
timer = setTimeout(function() {
$('.tip_container').remove();
}, 500);
$( '.tip_container' ).hover(
function() {
clearTimeout(timer);
$('.tip_container').css('display', 'block');
}, function() {
$('.tip_container').remove();
}
);
On the hover out of the link it will wait before executing the remove and if the mouse hovers over the tooltip it will clear the timer and set the tooltip to block to keep it displayed then on that hover out of the tooltip it will be removed.

check for ('div')mouseenter on ('a')mouseleave

my problem is following:
I got a trigger(a) and a popup(div). The div doesn't lie nested inside the anchor.
When I hover over a, I want the div to show up.
When I go from a to the div, I want it to stay visible.
When I leave the div, I want it to close.
When I hover over a and leave without entering the div, I want the div to close.
I got most of that figured out, but now I'm struggeling with requierement no. 2.
When checking for mouseleave on a, I check if there is a mouseenter on the div. If it is, I want to abort the mouseleave. If not, I want to close the div.
What am I doing wrong? Is this even the right way to do this?
Here's the markup:
<a href="#" class="popup_toggle" style='display:block;width:50px;height:50px;border:1px solid red;position:relative;'>Toggle</a>
<div class="popup_div" style='position:absolute;top:50px;left:0px;border:1px solid blue;display:none;'>Popup</div>
Here's the jQuery:
$('.popup_toggle').mouseenter(function() {
var element = $(this).next('.popup_div');
$.data(this, 'timer', setTimeout(function() {
element.show(100);
}, 500));
});
$('.popup_toggle').mouseleave(function() {
clearTimeout($.data(this, 'timer'));
if($('.popup_div').mouseenter==true)
{
return false;
}
else
{
$('.popup_div').hide(100)
};
});

What you're trying to do is fairly simple. When entering the trigger, identify the panel (layer, popup, whatever), save reference to each other using .data() and have the event handlers check if the related targets are either the trigger (from the panel view) or the panel (from the trigger view). I threw something together. Have a look at the console log to see how this works… http://jsfiddle.net/rodneyrehm/X5uRD/

That will most likely not work...no. I would suggest that you add a mouseenter and mouseleave callback to you <div> element as well and have them set a global variable that tells your other callbacks how to handle their events, i.e. "if global variable is true, don't hide the popup on mouseleave, otherwise hide popup" or something like this.
The other approach would be to check whether the mouse is inside the popup when the mouseleave callback tries to hide the popup. That might be much more work than it is worth though.

I believe the problem with your implementation is that the mouseenter on the div will fire shortly after the mouseleave from the a.
This would give you something like:
$('.popup_toggle').mouseenter(function() {
// Clear any pending "hide" timer
// Set a show timer
});
$('.popup_toggle').mouseleave(function() {
// Clear any pending "show" timer
// Set a hide timer
});
$('.popup_div').mouseenter(function() {
// Clear any pending "hide" timer
});
Note that you'll have to make sure that you access the same timer from both the .popup_toggle event and the .popup_div event. You may want to consider using Ben Alman's doTimeout plugin to help with this. It (usually) results in much clearer code than manually working with setTimeout/clearTimeout.

Jquery drop down

Here is a jquery drop down i am trying to make: http://jsfiddle.net/qYMq4/2/
Basically i just want a div to drop down when a user mouses over a link and stay down unless i mouse away from the link or over the dropped down div and then away from the div. So it is almost like a standard drop down menu that you see in alot of website navigation, but this just has a bit of animation so it doesn't appear instantly.
I'm finding it terribly difficult, as you can see it doesn't quite function correctly. Any adivce? Thanks for your input.

You can see a working demo of the following here.
I prefer mouseenter[DOCS] and mouseleaveDOCS in this situation as it behaves better when hovering over children. I restructured your HTML so that the hover is over the parent div of the link, so that when you hover over the gray area that slides down it's not considered a mouseleave as follows:
<div class="mask-layer">
<a class="top-link-cart" href="http://www.w3schools.com/">Test</a>
<div class="slidedown">div should close if user moves mouse away from test (but not to the gray area) or away from the gray area. The .mouseout function doesn't appear to work. </div>
</div>
I then restructured your Javascript to use .mask-layer for the hover events, and simplified the animation with slideUp[DOCS] and slideDown[DOCS] as follows:
$('.slidedown').hide();
$('div.mask-layer').mouseenter(function() { // enter animation
$('.slidedown').slideDown(600);
}).mouseleave(function() {
setTimeout(function() {
$('.slidedown').slideUp(600);
}, 200);
});

You can use the slideDown() and slideUp() methods - they're a littler easier to work with. You'll also want to use the windowSetTimeout. A lesser known feature is that it returns a number which will allow you to cancel the timeout. You can use that to keep the div open in the event the user scrolls down onto it. Some inspiration for this approach borrowed from here: http://javascript-array.com/scripts/jquery_simple_drop_down_menu/
$(document).ready(function() {
$('.slidedown').hide();
var timeout = 500;
var closetimer = 0;
$('a.top-link-cart, .slidedown').mouseover( function(){
cancel_timer();
$('.slidedown').slideDown(1000);
});
$('a.top-link-cart, .slidedown').mouseout( function(){
closetimer = window.setTimeout(function(){$('.slidedown').slideUp(1000)}, timeout);
});
function cancel_timer(){
if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;
}
}
});
http://jsfiddle.net/P567S/7/

if you are looking for a click action dropdown menu here it is
//toggle navbar on click.
$('//my link').click(function(event) {
event.stopPropagation();
$('//sub menu container').toggle();
});
//to close dropdown menu when clicked out it.
$(document).click(function() {
$('//sub menu container').hide();
});
hope it works for you..... !!

How to stop title attribute from displaying tooltip temporarily?

I've got a popup div showing on rightclick (I know this breaks expected functionality but Google Docs does it so why not?) However the element I'm showing my popup on has a "title" attribute set which appears over the top of my div. I still want the tooltip to work but not when the popup is there.
What's the best way to stop the tooltip showing while the popup is open/openning?
Edit: I am using jQuery

With jquery you could bind the hover function to also set the title attribute to blank onmouseover and then reset it on mouse out.
$("element#id").hover(
function() {
$(this).attr("title","");
$("div#popout").show();
},
function() {
$("div#popout").hide();
$(this).attr("title",originalTitle);
}
);

Here is another example of how it can be done by using data for value storage and prop for value assigning
$('[title]').on({
mouseenter : function()
{
$(this).data('title', this.title).prop('title', '');
},
mouseleave: function()
{
$(this).prop('title', $(this).data('title'));
}
});

I think setting to blank space and when the popup closes, setting again the proper text. I think this is the easiest way to stop it.

For me, I didn't care what the content of the title tag was. I just did:
$('a').hover(function() {
$(this).attr('title', '');
});
Which stopped the title tag from showing.