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

Question

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 <a href="#">clickhere</a> 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

Answer 1

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

Answer 2

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

Answer 3

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")) {