Is it possible that the mouseover event is only triggered once in jQuery?

Whenever the link is hovered over, I need the submit button to move back so that it doesn't overlap with the comment box that appears when the cursor hovers over it.

I tried a solution that worked once, but now I need help making it work every time the submit link is hovered over, 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:

The hidden hover comment box is currently blocking the submit button when clicked. I utilized JQuery to address this issue as CSS did not suffice in selecting only the parent class.

My goal is to have the submit button visible when the mouse is not on the sign-up link, and when hovering over the sign-up link, the complete hover box should appear above the submit button.

Answer №1

When hovering over the sign-up link, I want to see the hover box displayed on top of the submit button.

If you only want the tooltip to appear when hovering over the sign up link, then attach the events specifically to that link. This way, the tooltip will disappear when the mouse moves away from the signup link, allowing you to click the submit button easily.

Instead of adjusting the opacity and z-index, simply hide the tooltip using display:none and utilize this script:

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

Check out the updated Fiddle here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Wordpress is experiencing a recurring issue with scripts being loaded multiple times

Currently, I am attempting to load some of my scripts from CDNs such as CDNjs and Google. While the scripts are loading correctly, I have noticed a strange issue where each script seems to generate two or even three HTTP requests (for the same script). You ...

Why isn't my Enum functioning properly to display the colored background?

Why isn't the Background Color showing up when I pass in the BGColor Prop dynamically in my next.js + Tailwind app? I have tried passing in the prop for my component, but the color is not appearing. <Title title='This is HOME' descripti ...

What could be the reason my HTML page is not properly rendering with my CSS file?

My stylesheet doesn't seem to be applying properly. Initially, I had all my CSS in the same HTML file. Then I created a separate CSS file and copied all my styles onto that file, but now the styles are not being applied. I have already checked for sy ...

Struggling to eliminate the padding beneath the menu items in Bootstrap?

I'm having trouble adjusting the padding inside my menu. I want to make it less chunky and large, but so far I've only been successful in removing the top padding. The bottom padding just won't budge. Here's the code that helped fix th ...

Retrieving an HTML string in an Ajax request

When I make an ajax call to retrieve an HTML string, the response includes the complete HTML of the current page instead of just the HTML I am generating in the web method. Here is my code: $.ajax({ type: "GET", url: ' ...

jQuery-UI dialog malfunctioning following DOM refresh

Utilizing jQuery-UI dialog in modal mode to display multiple "Edit" forms on a webpage has proven to be quite effective. The edit forms are loaded into the dialog div through an ajax call and subsequently submitted via ajax as well. Upon successful submiss ...

Is it possible to create an AngularJS and jQuery Calendar Directive that activates by clicking on a Bootstrap glyphicon?

I have successfully created a directive for my calendar using AngularJS and jQuery. The datepicker pops up when the user selects the input box. Now, I am attempting to allow the user to click on Bootstrap's 'glyphicon glyphicon-calendar' to ...

Building an Angular 4 app featuring a customized default landing page and URL parameters functionality

I am in the process of developing a web portal that will be embedded within an iFrame. Below is the code snippet I am using to set up the portal: Routes Configuration const routes: Routes = [ { path: '', redirectTo: '/dash ...

Encountering an issue with WebRTC where the 'addIceCandidate' function on RTCPeerConnection is failing, resulting in an error displayed on the console. However, despite this error

I am facing an issue with connecting two peers using webRTC. While I can successfully display both local and remote videos, as soon as the remote video appears, the candidate object turns null and an error message is logged on the console. TypeError: Fail ...

Error in VueJS occurring following the import of a function into a JavaScript file

I've created a JavaScript script for sending data to a database, and I want to import it into my .vue file so that I can use it on button click. However, when I import the script, Vue displays the following error message and nothing appears on the pag ...

Scraping multiple websites using NodeJS

I have been immersing myself in learning NodeJS and experimenting with web scraping a fan wikia to extract character names and save them in a json file. I currently have an array of character names that I want to iterate through, visiting each URL in the a ...

Once invoked by an ajax request, the $().ready function is executed

The functionality of this code is flawless when running on its own. However, once I make an ajax call to it, the code fails to execute. I suspect that the issue lies within $().ready, but I haven't yet identified a suitable replacement. Any suggestio ...

Exploring the benefits of utilizing appcache in combination with PHP and a database

My focus is on developing web apps using jQuery Mobile that interact with a database via PHP to retrieve prices and other important information. To ensure accessibility even when offline, I have implemented appcache for my apps. <html manifest="manifes ...

Can you explain the purpose of the _app.js and _document.js files in Next.js? What is the significance of using an underscore (_) in Next.js?

After using npx create-next-app to create a next.js app, I noticed that there are 2 JavaScript files named app and document in the pages directory with an initial underscore. What is the purpose of this naming convention? The files appear like this: ▼ p ...

JavaScript - Accessing a static property through an object instance

UPDATE - The question title has been updated to accurately describe the issue I've decided to optimize my node.js application by implementing more OOP principles in my code. Previously, the mysql driver and connection (pool) were situated at the top ...

Issue with Discord.js: Newly joined user's username appears as undefined

robot.on('guildmateEntry', person =>{ const greeting = new Discord.MessageEmbed() .setTitle(`Greetings to the realm, ${individual}!`) const room = person.guild.channels.cache.find(channel => channel.name === " ...

Difficulty with navigation on Chrome for Android (also impacting Bootstrap's website and all other sites utilizing Bootstrap design)

While working on creating a responsive website using Bootstrap, I encountered an unusual issue with navigation specifically in Chrome on Android. After some investigation, I found that the same problem exists on Bootstrap's own website. To see the i ...

Utilizing a drop-down menu to display two distinct sets of data tables

After spending some time on my WordPress site, I've encountered a problem that has me feeling stuck. Currently, I have two functioning datatables which are displaying one on top of the other on the page. Additionally, there is a dropdown selection box ...

Custom sorting in JavaScript

I have a specialized sorting method that is defined as follows sortArrayBy: function(a, b, sortKey) { if (a[sortKey] < b[sortKey]) return -1; if (a[sortKey] > b[sortKey]) return 1; return 0; }, I am looking to enhance it ...

What causes the error "searchInput" to be undefined?

Currently, I am facing an issue while attempting to search for individuals stored in an array within the Redux store. Whenever I try to execute a search, an error is triggered with the following message: Cannot read property 'searchInput' of und ...