Is it possible to modify an HTML element when hovering over it in an ASP.Net page?

Is there a way to use jQuery to show the child span text - SomeClassChild3 string when hovering over the parent div - SomeClassParent in an aspx page?

Here is the JavaScript section of the code:


function ShowDiv(Somedata){
 for(var v in Somedata){
    var tempdata = ''
    tempdata += '<div class="SomeClassParent">'
    tempdata += '<div class="SomeClassChild">'+Somedata[v].serialnum+'</div>'
    tempdata += '<span class="SomeClassChild2">'+Somedata[v].textdata.slice(0,49).trim()+'</span>'
    tempdata += '<span class="SomeClassChild3" style="display:none;">'+Somedata[v].textdata.slice(49,v.textdata.length).trim()+'</span>'
    tempdata += '</div>'
}
}

$(document).ready(function () {
    $('.SomeClassParent').hover(function () {
        $(".SomeClassChild3").css({"display":"block"});
    });
});

Answer №1

If you want the elements to collapse when not being hovered over, you should use mouseenter and mouseleave events instead of just hover.

Make sure to target the children of the parent element specifically, rather than using a general class like "SomeClassChild3" which may cause all elements with that class to display when hovering over any element with the class "SomeClassParent".

$(document).ready(function () {
    $('.SomeClassParent').mouseenter(function () {
        $(this).find(".SomeClassChild3").css({"display":"block"});
    });
    $('.SomeClassParent').mouseleave(function () {
        $(this).find(".SomeClassChild3").css({"display":"none"});
    });
});
.SomeClassParent{
  width: 30%;
  float: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="SomeClassParent">
  <div class="SomeClassChild">Child</div>
  <span class="SomeClassChild2">Child2</span>
  <span class="SomeClassChild3" style="display:none;">Child3</span>
</div>

<div class="SomeClassParent">
  <div class="SomeClassChild">Child</div>
  <span class="SomeClassChild2">Child2</span>
  <span class="SomeClassChild3" style="display:none;">Child3</span>
</div>

<div class="SomeClassParent">
  <div class="SomeClassChild">Child</div>
  <span class="SomeClassChild2">Child2</span>
  <span class="SomeClassChild3" style="display:none;">Child3</span>
</div>

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

Guide on sending data to MongoDB using Postman

I am currently facing an issue while trying to send data to the MongoDB database using Postman. Despite everything seeming fine, I keep encountering errors. https://i.stack.imgur.com/Gcf5Q.jpg https://i.stack.imgur.com/ntjwu.jpg https://i.stack.imgur.co ...

Placing an image at the forefront of all elements

Recently, I created a horizontal opt-in bar for my Newsletter on my website. Instead of the traditional submit button, I decided to use an image by incorporating some CSS: #mc_embed_signup input.button { background: url(http://urltotheimg.com/image.jpg); ...

Using Rails to pass variables through a remote link to a partial

I am aiming to create a minimalist image gallery where the user is presented with thumbnail images that, when clicked, will refresh a container on the page with the full-size version. Currently, I have only been able to make it work with one image, as I ca ...

Compile an ASP.NET website into static files such as HTML, CSS, and JavaScript prior to deployment

Can a simple ASP.NET website without ASP webform or .NET controls be precompiled into static files such as HTML, CSS, and JavaScript? I am interested in utilizing the master page feature and Visual Studio IDE intellisense while still being able to deploy ...

Uninitialized Array Member in Angular 8

Can anyone explain why the code snippet below is printing "undefined"? I have created several objects and intended to display the corresponding images, but after iterating through them using ngfor, nothing appeared. To investigate, I logged the array and ...

What is the best way to style radio boxes in HTML to resemble checkboxes and display X's when selected?

I'm looking to create a form with radio boxes that resemble checkboxes and display a glyphicon x when selected. I've experimented with various solutions such as: input[type="radio"] { -webkit-appearance: checkbox; /* Chrome, ...

Using a <div> to contain <mat-card> in Angular Material

Can you achieve the following: Show components with specified width in a row instead of the usual column layout Enclose the cards within another defined container I've been attempting to accomplish this but without success so far.... While materia ...

Python Selenium- Extract and print text from a dynamic list within a scrolling dropdown element

I am currently working on a project using Selenium and Python to extract a list of company names from a dropdown menu on a javascript-driven webpage. I have successfully managed to reveal the list of company names by clicking the navigation button, and eve ...

Issue with Angular 13 Bootstrap5 Navbar's functionality

Angular 13 is my framework of choice, and I recently integrated Bootstrap 5 into my project using the command below: ng add @ng-bootstrap/ng-bootstrap As for the index.js file content, it looks like this: <!doctype html> <html lang="en" ...

Dual Camera Toggle Functionality with Three.js Orbit Controls

I am facing an issue with two cameras in one scene, one viewport, and one renderer. I switch between cameras using HTML buttons. ISSUES Issue 1 When using camera1, there is no response from moving the mouse. However, when I switch to camera2, the orbit ...

Updating lists using PHP and Ajax: a dynamic approach

I am currently using a chat service that relies on polling every 20 seconds for new user data in the chat room. I am looking to improve this process by only downloading information for new users who have just joined, rather than re-downloading old data f ...

Does ECMAScript differentiate between uppercase and lowercase letters?

It has come to my attention that JavaScript (the programming language that adheres to the specification) is sensitive to case. For instance, variable names: let myVar = 1 let MyVar = 2 // distinct :) I have not found any evidence in the official specific ...

Transform the JavaScript object received from an AJAX request into HTML code

Here is an example of what the result (data) looks like: <tr> <td> Something... </td> </tr> <div id="paging">1, 2, 3... </div> This is using ajax to retrieve data. ... dataType: "html", success: function( ...

Creating a personalized gradient using Tailwind CSS and Daisy UI framework

I’m attempting to incorporate a unique gradient into my next.js application with the help of Tailwind CSS and Daisy UI. Below is the specific code snippet I plan on using: background: linear-gradient(180deg, rgba(192, 192, 192, 0.04) 0%, rgba(201, 180, ...

Discovering the page load times of web elements on a website with the help of Selenium WebDriver

On my HTML5 webpage, there are 4 charts that each take a different amount of time to load after the static content has already loaded. The loading process is indicated by a 'rendering' circle image for all 4 charts. I am looking for a way to dete ...

The rows in the React table are refusing to change color despite the styles being applied; instead, they are coming back

Hey there, Green Dev here! I've been working on a React table where I'm trying to conditionally change the row color. The styles are being passed in, but for some reason they return as undefined. Strangely enough, when I remove my logic and simpl ...

An innovative way to display or hide a div depending on the multiple selections made in a select2 jQuery field

A select2 jQuery dropdown menu is set up with two options: *For Rent *For Sales If the user selects 'For Rent', specific fields will be displayed below it, as well as for 'For Sales'. The challenge arises when both options are ...

Use vertical gaps to separate items by applying the following technique:

One of my components is designed to act as a badge. The CSS for this component includes: https://i.sstatic.net/F0QZ6.png HTML: <div class="label label-as-badge"> {{ value.Termo }} <i class="fa fa-times"></i ...

How to customize the color of radio buttons in JFXRadioButton using CSS

I am facing an issue with customizing the styling of JFXRadioButton component from this library : jfoenix.com I want to modify the color of the circle, but the default class is not working. Are there any suggestions or solutions available? (The colors me ...

The event is being triggered on two separate occasions

Hey there! I'm trying to bind the onclick event to both a parent and child element using the same method. However, I'm running into an issue where the event is being fired twice. Any suggestions on how to prevent this from happening? <div id= ...