Hover over two different divs with JQuery

I have a situation where I have two HTML table rows. When I hover over the first row, I want to display the second row. However, once the mouse leaves both rows, the second row should be hidden.

Is there a way to achieve this using JQuery?

<tr class="pr_td_main pr1">
   <td>123</td>
   <td>15</td>
</tr>
<tr class="pr_td_desc pr1">
   <td colspan="3">description</td>
  <td colspan="2">123<br />456</td>
</tr>

Answer №1

The question appears to be quite unclear. Are you looking for the description to display when hovering over the main content?

If so, you can achieve this by using the following code:

$(".pr_td_main").mouseover(function(){
    $(this).next(".pr_td_desc").show();
});

To hide the description when the user moves their mouse out:

$(".pr_td_desc").mouseleave(function(){
     $(this).hide(); //hide this tr
});

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

Dynamically showing a div using JavaScript and AJAX after changing the window location

After successfully fetching data from the server through AJAX, I am redirecting to the same screen/URL. Is it possible to show/display a div after redirecting using jQuery? $.ajax({ type: "POST", url: action, data: form_data, success: func ...

Is it possible to declare language features in Typescript? For example, changing `!variable` to `no variable`

Can Typescript language features be declared within the app's source code? I want to enhance code clarity by implementing a small feature. Modified Null Test if (no userDetails) { // handle null } This new null test syntax is a little more conc ...

Using jQuery to display and conceal list items that are in the same position in another list

Currently struggling with a seemingly simple task... I have a ul of links followed by another ul containing descriptions corresponding to each link. My goal is to hide all descriptions in the second ul and display only the relevant one when hovering over a ...

WP User Query and the wp-admin/admin-ajax function are both returning a value of 0, even with the

I have encountered a strange issue and I am seeking guidance to find a solution. Being new to PHP and JQuery, I am unsure of what is causing this problem. Essentially, I have an ajax call for a custom search field that functions properly. However, after ea ...

Is it possible to utilize promises to execute a function once the initial one has completed its task?

I am struggling to wrap my head around promises. Currently, I am working on a project where I scrape a website using node and NPM, then save the data to a CSV file. While I can successfully retrieve the data with multiple scrapes, I want to ensure that th ...

What is the best way to update my lowdb database directly from the frontend in a next.js application?

As a hobby programmer with experience in React and Firebase, I have recently started using Next.js. I'm curious if I can utilize it as a JSON-based database for local applications on my Raspberry Pi. I have successfully set up LowDB to access data fro ...

Display an HTML code snippet on the webpage

I'm facing a situation that has been discussed before on this platform. However, I want to present my problem in a different light. I am working with PHP and need to display an HTML string from the database on my webpage. The issue is that the CSS app ...

AngularJs - Customizable dynamic tabs that automatically adapt

Below is the HTML code snippet: <div> <ul data-ng-repeat ="tab in tabs"> <li data-ng-class="{active: tab.selected == 'true'}" message-key="Tab"> </li> </ul> </div> As shown ...

Something seems off with Chrome

I am facing a unique issue that I need help with. Unfortunately, the code is too long to post here but essentially it involves creating a menu for a website. The menu works perfectly and looks great on all browsers except for Chrome. This is unusual as Ch ...

Issue with Datatables FixedColumns plugin in IE8/7 and Firefox

I am encountering issues with the FixedColumn plugin on IE8, IE7, and Firefox. All of them are causing my table to malfunction, displaying the following error: Error: Invalid argument. Line: 566 Char: 3 Code: 0 URI: ./resources/javascript/dataTable/Fixed ...

Template for Gatsby's alternative layout design

I have recently developed a template for pages that showcase a single product (blog-post.js). However, I now require a different type of page with its own template (category-post.js) to display all products within a specific category. Since the number of c ...

Adding setTimeout within the Axios Scope can enhance the functionality and performance of your

Show an alert in the catch block of Axios. The issue at hand: Error message does not disappear after the specified time when using setTimeout. ...

Trying out the demonstration of the angular calendar in action

I am currently attempting to run the official example of the angular-calendar component found at http://angular-ui.github.io/ui-calendar/ Unfortunately, I am encountering an error that states: TypeError: undefined is not a function - it seems that the fun ...

Hey there, I'm looking to automatically delete new users from my mongoDB atlas database if they haven't verified their phone number within 2 minutes. I believe using the TTL feature would be

Database Schema In my User schema, the field isVerified is initially saved as false. The user enters their phone number, receives a verification token via SMS, and both the token and number are saved in the database. Once the user enters the verification ...

Encountering difficulty in retrieving data from an unidentified JSON array using Javascript

Exploring the realm of Javascript and JSON, I find myself faced with a challenge - accessing values in an unnamed JSON array. Unfortunately, as this is not my JSON file, renaming the array is out of the question. Here's a snippet of the JSON Code: [ ...

Error arises when uploading csv files to Node.js with Multer due to an unexpected field presence

I'm currently working on implementing a file upload feature with the use of Node.js, Vue, and Multer. Below is the Vue.js front-end code: export default { data(){ return{ selected: "How do you want to input the data?", options: [ ...

Python Automation with Selenium (Locating elements using CSS selectors)

Is it possible to select and access the first element of an array using a CSS selector in Python? For instance: css=('.od-FieldEditor-fieldTitle.ms-Label.is-required') generates an array of 6 labels. I am interested in accessing the innerText a ...

HTML5 canvas processing causing web worker to run out of memory

Within the Main thread: The source image array is obtained using the getImageData method. It is represented as a uint8ClampedArray to store the image data. Below is the code executed in a web worker: (This operation generates a high-resolution image, but ...

Preventing input in one textbox if another textbox has a filled value in HTML

Apologies for asking this question, but is there a way to disable one text box if another text box has a value? I've attempted using the following code, but it doesn't seem to work. Sorry for the inexperienced inquiry T_T function disableTextbox ...

Is there a more efficient method for streamlining the Express-Validator middleware in a separate file

In my current project, there is a lot of validation required using Express-Validator. In each file, I find myself repeating the same validation code: //Validation and Sanitizing Rules const validationRules = [ param('tab').isString().isLength({ ...