The on mouseover only works once? JQuery

Question

On hover the link I want the submit button push back so the submit button doesn't poke through the comment box (which is activated on hover of the cursor).

I made something that worked, but only once. Can anyone help me?

I want to perform this every time on hover of the submit link, not just once.

$( function hideSubmit() {
    $('.submit').parent().closest('.submit').on("mouseover", function() {
        $('.submit').css("position", "relative");
        $('.submit').css("z-index", "-1");
    });
     $('.commentBox').on("mouseleave", function() {
        $('.submit').css("position", "relative");
        $('.submit').css("z-index", "999");

     });

});

UPDATE: jsfiddle.net/wmygmbc4 Improve question:

I want to be able to click on the submit button but the hidden hover comment box is blocking it. Therefore I used JQuery to fix this. CSS does not cut the job because it does not support allow me to select parent class only.

But I want to show the submit button when the mouse is not on the sign up link. And if I hover on sign up link I should see the complete hover box on top of the submit button.

You are changing two different `classes` on mouseevents. You should stick with one. — loveNoHate, Sep 14 '14 at 08:19
just use the `:hover` selector. with a bit of cleverness, you won't need any jQuery for something as simple as this. — mechalynx, Sep 14 '14 at 08:36
post your html also. It's easier to se the full picture then. — Dejan.S, Sep 14 '14 at 09:01
DOC ASAREL It is what I wanted to do. Notice the mouse event is not the same. One is mouse OVER, and the other is mouse LEAVE. @ivy_lynx No. CSS at the moment does not support selecting of the parent class only (http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector). Please look through the question posted properly before leaving a comment. — Martynogea, Sep 14 '14 at 09:06
Well post your html so we can help you properly. I mean you use `.parent().closest()` and so on. How could we know if that is correct? — Dejan.S, Sep 14 '14 at 09:13
I was making a jfiddle. I'll post now: http://jsfiddle.net/wmygmbc4/ — Martynogea, Sep 14 '14 at 09:19
@Martynogea I did read the question properly. The quality of the answers matches the quality of the question. Be clear so that you'll get clear answers. — mechalynx, Sep 14 '14 at 09:19
as you can see, on hover the link the SUBMIT button cannot be clicked on hence when I want to use the Jquery mentioned. — Martynogea, Sep 14 '14 at 09:19
@ivy_lynx you told me to do something in a smug attitude that CSS does not support. I'm sorry my english is not very good but your answer was not constructive at all — Martynogea, Sep 14 '14 at 09:21
@ivy_lynx Yes. I have done so (gone from CSS to Jquery), hence I tried using Jquery but to no result so I came on SOF for support. — Martynogea, Sep 14 '14 at 09:39
@Martynogea I checked your fiddle - when you say comment box, do you mean tooltip? Also, from the fiddle it seems that the box doesn't stay open when you move down to the submit button, so the submit button _is_ clickable if you want to submit the text. What browser are you using? It might be causing different behavior. — mechalynx, Sep 14 '14 at 09:41
When I hover my cursor over 'Signup' link it should open up a arrow box with a message "Create an account.". But I cannot click on the submit button, as the box is in front of the submit button just hidden away with opacity:0. Yes, I think tooltip. I'm using Chrome, latest version. — Martynogea, Sep 14 '14 at 09:47
@Martynogea I think I see what's happening - Chrome probably treats the hovers a bit differently, because on Firefox I have access to the submit button if I move the mouse down, but sometimes it stays open. I have an idea but, on a side note, is there any reason you're using `
@Martynogea Is this any better? [fiddle](http://jsfiddle.net/wmygmbc4/2/) — mechalynx, Sep 14 '14 at 10:02
@ivy_lynx yeah browsers can be frustrating at times. I'm using a list because of my navigation menu. — Martynogea, Sep 14 '14 at 10:03
@Martynogea I think the CSS can work the way you have it in your fiddle, but what happens is, when you mouse over the arrow box to get rid of the tooltip, you're now mousing over the comment box making the tooltip appear again. In short, it causes a loop: you mouse over the box, tooltip appears, but when you remove it, you're triggering the `:hover` to make it appear again. The way I did it in the fiddle doesn't have that problem because you need to mouse over the signup link, so when you move the mouse over the arrow box, it doesn't trigger the tooltip again. — mechalynx, Sep 14 '14 at 10:08
It is better. But unfortunately I can't use display:block and none. As it interfered with my layout (can't remember, it's a while back). But I had to switch to opacity instead. The Signup is in the ul, and I think I prefer to stick with UL so I can inline all my list and I think div will be a lot more complicated fixing the CSS style again — Martynogea, Sep 14 '14 at 10:09
@Martynogea i think `
` and `opacity` can stay in this case, you just need to change it so that when the tooltip disappears, the user won't trigger it again by accident. Perhaps you can make an invisible `
` overlay at the top-half of the comment and attach `:hover` to that? (if hovering over signup doesn't fit your needs). — mechalynx, Sep 14 '14 at 10:11
@ivy_lynx I see. I'll see how I can integrate the CSS you did, without skewing the layout. As it's quite complicated as the nav bar is fixed position and any changes is quite annoying. — Martynogea, Sep 14 '14 at 10:11
good point. I'll give that a go. Preferably I want the tooltip to not exist when Signup is not hovered but I'll try the work around suggested. Thanks. — Martynogea, Sep 14 '14 at 10:13
@Martynogea no offense but, it seems your current design is causing you more trouble than it's worth - if you're going to have to maintain this in the future, maybe a rewrite sooner would save you from a lot of pain. — mechalynx, Sep 14 '14 at 10:14
@Martynogea the tooltip doesn't exist when signup isn't hovered for me, Chrome should behave the same - does it keep it visible? — mechalynx, Sep 14 '14 at 10:16
@ivy_lynx Yeah. I'm planning on doing so when I make it cross platform with mobile too. For now I just want everything to work, and leave the styling later. Ah if you use my first JSfiddle then it exists due to the opacity style and did not use display none. But ATM I'm trying to use Jquery to hide the comment box but somehow hide function does nothing. — Martynogea, Sep 14 '14 at 10:26

score 1 · Accepted Answer · answered Sep 14 '14 at 10:44

if I hover on sign up link I should see the complete hover box on top of the submit button

If you want to show the tooltip only on hovering the sign up link, then bind the events on the link alone. When the mouse moves out of the signup link it'll be hidden and you'll be able to click the submit button.

Instead of changing the opacity and z-index values, just hide the tooltip using display:none and use the following script:

$('.commentBox a').on("mouseenter", function (e) {
  $('.arrow_box').show();
});
$('.commentBox a').on("mouseleave", function () {
  $('.arrow_box').hide();
});

Updated Fiddle

Great it works! I made a similar code of hide/show but I did not have the 'a' after .commentBox. And it did not work. — Martynogea, Sep 14 '14 at 10:51

The on mouseover only works once? JQuery

1 Answers1