Jquery: Attaching "each" to an "on" event

Question

I have a list of results, and I added an hover event to it using jQuery, so the title will be colored red.

It works just fine.

<li><a class="hoverbox"></a><h1 class="ttl">Result 1</h1></li>
<li><a class="hoverbox"></a><h1 class="ttl">Result 2</h1></li>
<li><a class="hoverbox"></a><h1 class="ttl">Result 3</h1></li>

$(document).on({
   mouseenter: function () {
    $('.ttl').css("color","red");
   },
   mouseleave: function () {
    $('.ttl').css("color","inherit");
   }
}, ".hoverbox");

The thing is whenever I do mouseover on a single element, all of the elements turn red. I want only the specific element to go red.

I tried using jQuery's each() but couldn't wrap my head around how to use it with the given syntax.

`$('.ttl')` selects all the `.ttl` elements, how did you think it would work? Do you want the *next* `.ttl` element to be colored? Such as `$(this).next('.ttl')`? — zzzzBov, May 17 '16 at 14:00
$(this) will not work because I am not changing the specific element. I am coloring the element next to it (the title). @zzzzBov Yes. Thank you, it worked. I am sorry if the question sounds dumb (already got downvoted) but I just couldn't figure out by myself. Thanks again. — Django, May 17 '16 at 14:01
OP, you code is not even working. You need to remove '.hoverbox' at the end. Don't know what it is doing there, but it definetly break your code. — Michelangelo, May 17 '16 at 14:09
@Mikey The code does work, I am working according to [this](http://stackoverflow.com/a/9827114/4124802) . I must use this syntax because the content is loaded dynamically. — Django, May 17 '16 at 14:24
@Django Strange, doesn't work for me https://jsfiddle.net/6ja0gv5q/1/, what version of jQuery are you on? — Michelangelo, May 17 '16 at 14:31
@Mikey Try this please to see the issue: https://jsfiddle.net/w4j5hsLh/2/ — Django, May 17 '16 at 14:35
@Django, please consider accessibility. For example, how would someone who is unable to use a mouse access this information? — zzzzBov, May 17 '16 at 20:56

justinledouxweb · Answer 1 · 2016-05-17T14:21:27.507

3

Is there a reason you need to do this with JavaScript? This can be achieved really easily with CSS.

HTML:

<ul class="list">
    <li><a class="hoverbox"></a><h1 class="ttl">Result 1</h1></li>
    <li><a class="hoverbox"></a><h1 class="ttl">Result 2</h1></li>
    <li><a class="hoverbox"></a><h1 class="ttl">Result 3</h1></li>
</ul>

CSS:

.list > li:hover .ttl {
    color: red !important; // if you have to override an already applied theme (like wordpress) 
}

edited May 17 '16 at 14:21

answered May 17 '16 at 14:07

justinledouxweb

1,337
3
13
26

Best solution. Don't use js for simple CSS problems. – Michelangelo May 17 '16 at 14:08
It won't work due to z-index & position:absolute properties of the hoverbox div. Thanks though – Django May 17 '16 at 14:10
1

Of course it will... If CSS can't reach it because of z-index, JavaScript should not be able to either... – justinledouxweb May 17 '16 at 14:11
1

@Django can you attach a screenshot of you problem? – justinledouxweb May 17 '16 at 14:11
@Django Maybe give the complete CSS for your elements. This problem should be solved with CSS. – Michelangelo May 17 '16 at 14:13
I will do one better. I am using the Wordpress theme Listify. The results list demo can be found [here](https://demo.astoundify.com/listify/listing-region/toronto/) . Just switch _.hoverbox_ with _.job_listing-clickbox_ . As you can see, attempting `.type-job_listing.style-grid .job_listing-entry-header .job_listing-title:hover{}` just won't do anything. – Django May 17 '16 at 14:16
1

@Django Not sure what I am looking for here... that said, if it is a theme, they are most probably already using CSS for hovering. This means that if you don't use a selector chain that is heavier than theirs, your's won't work. Make sure you add `!important` next to you CSS red value. That way it will override their CSS. – justinledouxweb May 17 '16 at 14:20
@justinledouxweb It is not an override problem. I have used !important. The problem is caused because .hoverbox is located on top of the title element, so you can't access it with :hover. Thank you for your time though. – Django May 17 '16 at 14:26
@Django I can't find any `hoverbox` on the link you sent... Where do you see what we are talking about? – justinledouxweb May 17 '16 at 14:28
@justinledouxweb Sorry I did not mention it, the content is loaded dynamically. So you have to use Inspect Element on one of the boxes in the results list to see the HTML after it rendered. I have a fiddle though https://jsfiddle.net/w4j5hsLh/2/ – Django May 17 '16 at 14:31
@Django I'm still not clear what you are supposed to hover on... Please describe what to do step by step in order to see what you want. I see the results, but there does not seam to be any hover effect. – justinledouxweb May 17 '16 at 14:35
@justinledouxweb Yes, I want to create one. But using hover event on the div that contains the title does not work. – Django May 17 '16 at 14:37
1

@Django AH! I see now. They are positioning the anchor on top of the container. So what you can do it put the hover of the
wrapping the anchor and the content. So `.job_listing:hover .job_listing-title { color: red }`

justinledouxweb

May 17 '16 at 14:40

@justinledouxweb Mikey beat you to it haha, but I very much appreciate your time and effort nonetheless. – Django May 17 '16 at 14:43

score 2 · Answer 2 · 2016-05-17T14:10:49.157

2

You can use the following to get the expected result.

$('.ttl').on('mouseenter',function() {
    $(this).css("color","red");
    }).on('mouseleave',function() {
    $(this).css("color","inherit");
    });

edited May 17 '16 at 14:10

answered May 17 '16 at 14:02

score 1 · Accepted Answer · answered May 17 '16 at 14:37

1

Solution without JS

https://jsfiddle.net/w4j5hsLh/3/

.hoverbox{
position:absolute;
z-index:999;
width:100%;
height:100%;
}
li{width:100px;height:100px;position:relative;}

li:hover > .ttl {
  color:red;
}

answered May 17 '16 at 14:37

Michelangelo

5,888
5
31
50

Aggh! Big thank you to everyone that helped. I appreciate it. – Django May 17 '16 at 14:41

Remo H. Jansen · Answer 4 · 2016-05-17T14:07:30.363

0

You can't use $('.ttl') because it refers to all the .ttl elements you need to use $(e.currentTarget).parent().find('.ttl') to select the current .ttl element:

$(document).on({
   mouseenter: function (e) {
    $(e.currentTarget).parent().find('.ttl').css("color","red");
   },
   mouseleave: function (e) {
    $(e.currentTarget).parent().find('.ttl').css("color","inherit");
   }
}, ".hoverbox");

However, as others have said, using CSS is recommended over using JS.

edited May 17 '16 at 14:07

answered May 17 '16 at 14:02

Remo H. Jansen

23,172
11
70
93

1

There are no `.ttl` elements inside `.hoverbox` elements (why I deleted my same answer). – Reinstate Monica Cellio May 17 '16 at 14:05

score 0 · Answer 5 · answered May 17 '16 at 14:09

0

You have to do minute change if you want to attach multiple event handlers simultaneously using a plain object.

$('.ttl').on({        
   mouseenter: function () {
    $(this).css("color","red");
   },
   mouseleave: function () {
    $(this).css("color","inherit");
   }
});

Check this jsfiddle for demo

answered May 17 '16 at 14:09

brk

48,835
10
56
78

Thank you but the "hoverbox" div has properties (position:absolute;z-index:999;) that force me to apply the "hover" to it alone. – Django May 17 '16 at 14:13
I am not seeing any div.hoverbox but it is on a element. I have added some rules to hoverbox, you can check this https://jsfiddle.net/vasi_32/w4j5hsLh/1/ – brk May 17 '16 at 14:16
is a.hoverBox has any purpose? – brk May 17 '16 at 14:34

Jquery: Attaching "each" to an "on" event

5 Answers5