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.
Advertisement
Answer
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();
});