Switching back to the original CSS file after making changes with jQuery's CSS functions

Within another element's click event, I am using JQuery to toggle the display of a delete icon element from none to block and back again.

However, in the CSS file for the corresponding class, I have defined:

.pageDeleteIcon
{
   display:none;
}
.pageButton:hover .pageDeleteIcon
{
    display: block;
}

The parent div that contains the delete Icon is referred to as pageButton.

After executing the click function, it seems to override the CSS styling that controls its visibility on hover. Is there any way to reset the style to match the CSS file?

Thank you

jquerycss

Answer №1

An alternative method involves utilizing jQuery to dynamically add or remove a specific class to the delete icon.

.hiddenIcon{visibility:hidden;}

By using jQuery, you can trigger the class toggle on click events: .toggleClass('hiddenIcon')

Answer №2

It is recommended to utilize add/remove classes instead of show() / hide() when working with Javascript. For instance, in this scenario, the class that should be added or removed is show_button.

//The onclick event for an external element
$('#hide_delete').click(function (){
  $('.pageButton').toggleClass('show_button');
  return false;
});

//This code will add the class on mouse hover and remove it on mouse out.
$('.pageButton').hover(function (){
    $(this).addClass('show_button');
  },
  function (){
    $(this).removeClass('show_button');
});

This CSS snippet controls the visibility of the button based on whether the class show_button is present.

.pageDeleteIcon {
  display:none;
}
.pageButton.show_button .pageDeleteIcon {
  display: block;
}

You can view a live demonstration at: http://jsfiddle.net/pvsyx3ez/

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

Utilizing the power of jQuery validation and Select2, we can seamlessly display or conceal success and error messages, all while maintaining a sleek design with Bootstrap

This is an original question Previous inquiries regarding this topic are outdated, dating back 4-5 years and pertaining to earlier versions of the projects in question. Status Update For my current project, I am utilizing: Bootstrap version 4.4.1 jQue ...

jquerybootstrap-4jquery-validatejquery-select2

Adjust the style of cursor - User Interface Expansion Panel Material Design

Using the MiU component "Expansion panel", I encountered an issue. By default, when the user hovers over the panel, the cursor is set to pointer. I attempted to change it to a default cursor, but my modification did not work. The code for my component is ...

cssreactjsmaterial-ui

What is the best way to align a circular image using CSS?

Having an issue with positioning a rounded image to the left of a webpage. Despite trying various methods, the image ends up flat with its corners missing and positioned on the right side instead of the intended left. I've scoured the internet for ans ...

htmlcss

The alignment of the Unicode character is off and is not centered within the button

Upon implementing a unicode character as a button, I've observed that the alignment of the character is not centered properly (both horizontally and vertically) within the button. It's puzzling why this misalignment occurs even after setting padd ...

htmlcssunicode

Tips for positioning a mat-form-field beside an h1 tag

I've been attempting to place an h1 next to a mat-form-field from Angular Material, but I'm encountering some difficulties. Here's what I've attempted so far: <div class="mat-elevation-z8"> <mat-form-field> <mat-l ...

htmlcssangularangular-material

The never-ending loading animation in Jquery ajax search is relentless

In my quest to create an efficient search functionality using ajax, I have written the code below. The idea is that when a user presses a key and then stops for 500ms, an ajax request is triggered to perform the search operation. However, there seems to be ...

javascriptjqueryajax

Validating a form using HTML5 in a modal designed with Bootstrap

As a newcomer to jquery and javascript, I am facing a challenge. I want the form to open when the "Open Modal" button in the modal is clicked. After that, upon clicking 'Save' in the modal, I need it to validate the HTML5 form and if validation ...

jqueryhtmlformsvalidationbootstrap-modal

What is the best way to position a div at the end of a row in Bootstrap?

Looking for advice on how to structure this markup: <div class="wrapper"> <div class="row"> <div class="col-md-4"></div> </div> <div class="next-to-div"></div> </div> I'm trying to ...

htmlcsstwitter-bootstrapbootstrap-4

Loop through the JSON object at a depth of three levels

Can someone please help me with this issue that's been bothering me? I'm currently working with Facebook's Graph API to access data. I need to find out how to retrieve the application name. { "data": [ { "messag ...

javascriptjqueryjsonfacebook-graph-api

What is the best way to adjust the textfield's size proportionally to its parent accordion when the window is resized?

Inside an accordion, I placed a text field with specific widths and heights. However, when I resize the browser window, the accordion width changes proportionally to the window size while the text field width remains the same. This causes the text field to ...

cssreactjstypescriptmaterial-ui

Guide to effortlessly convert SCSS to CSS using an automatic vendor prefixer

Is there a tool that can convert SCSS to CSS while automatically adding vendor prefixes? I've tried using node-sass with npm, which worked well, but it doesn't add prefixes like box-sing: border-box; or display: flex; properties. Note: I also tr ...

cssnode.jsnpmsass

Serialization not being successful

Having an issue with my form that is being loaded and posted using ajax. When trying to send the data, nothing is added to the post. Here's a simplified version of the code: <form id="userForm"> <input type="text" name="username" /> ...

javascriptjqueryajax

Issue with the alignment of two rows in an HTML template

I'm encountering an issue with the spacing between two rows/elements in an HTML template. I'm working on creating a product grid for our restaurant and used a template sourced from the Internet. As shown in this picture: issue1 The problem lies ...

htmlcssdisplayspacing

Next.JS CSS modules are experiencing issues with functionality

Organizing the CSS structure for a project by creating a module of CSS for each component or page can sometimes present challenges. Take a look at the code snippet below: .navbar { display: flex; justify-content: flex-start; align-items: center; pa ...

cssreactjsnext.jsfrontendcss-modules

Customize CSS on a specific webpage to overwrite the default values set by the

We recently had a website redesigned by a company that also manages and hosts it, along with providing our CRM system. The issue at hand is that they include a backlink in the footer that I am unable to modify since it's not part of the page until the ...

htmlcss

A function similar to setCell for modifying form fields in JqGrid

After searching through numerous answers from @Oleg, I couldn't find the solution I was looking for. I am dealing with a grid where I can edit inline in certain fields. Specifically, I am working with autocomplete functionality and when I select an it ...

javascriptjqueryasp.netjqgrid

Using script tags in JQuery tabs to create dynamic content

My goal is to load dynamic content into each of the four jquery tabs. When a user clicks on a tab, I trigger a jquery ajax call to fetch the content specific to that tab. The content includes a set of accordions with script tags embedded in it. Strangely, ...

jqueryhtmlajaxdom

I'm having trouble figuring out how to perfectly center this div on all types of devices

As someone who is new to css, I have been struggling to center these divs in the middle of the page across all devices despite searching extensively online and trying various solutions without any success. Check out my code below: Snippet: :after, :be ...

htmlcss

Creating a webpage that dynamically loads both content and video using HTML and Javascript

I designed a loading page for my website, but I could use some assistance. The loading page remains visible until the entire HTML content is loaded and then it fades out. However, I am facing an issue because I have a background video that I want to load ...

javascriptjqueryhtmlcssvideo

Picture escapes the div in a hurry

I mistakenly placed the yellow dot "gif1" outside of the black box "gif" instead of inside. How many errors can you spot in my code? Take a look at the Livewave Preview to see the current state of the design. I have attempted to fix this issue by using o ...

htmlcss