Is there a way to reset back to the default CSS styles?

I have a div container with a nested span element (simplified).

<div class="divDash">
    <span>XX</span>
</div>

The CSS styling for the div makes the span initially hidden and only visible when hovering over the parent div.

.divDash {height:300px;width:300px;border:1px solid gray;}
.divDash span {display:none}
.divDash:hover span {display:inline}

After certain user interactions, I need to hide the span using jQuery...

$('.divDash').children('span').hide();

Subsequently, if I try to simply show the span again by using

$('.divDash').children('span').show();

, it remains permanently visible instead of just on hover as intended.

How can I restore the original CSS behavior so that the span is only shown on hover?

javascript jquery html css

Answer №1

To achieve the desired behavior, consider toggling a custom CSS class instead of utilizing the show and hide functions.

Answer №2

To return to the original settings, simply set display: ''

$('.container').find('span').css('display', '');

See it in action: Live Example

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

What is the best way to validate adjusted tags within the html editor of Visual Studio 2012?

The html editor in Visual Studio 2012 keeps giving me warnings for tag names that are not recognized in the detected or configured html schema. Since I am using AngularJs by Google, this is quite inconvenient as it relies on the ability to enter custom ta ...

html visual-studio-2012

Retrieve a single element from each array stored in MongoDB

Can someone help me with a query in MongoDB? I have a document structure like this, and I am looking to utilize the $addToSet operator to add a value to one of the items within the 'votes' field. However, I also need to remove that value from all ...

javascript node.js mongodb discord discord.js

Load prior state when the value changes with UseState in NextJS

In the development of my e-commerce application, I am currently working on implementing filters based on category and price for the Shop page. To handle this functionality, I have established the initial state as follows: const [filters, setFilters] = useS ...

javascript reactjs react-hooks next.js use-state

Steps for creating a border around a container Div:1. Set the width and

Seeking assistance in bordering a div with 4 fa-icons inside. The parent div is named Container, and as a result, the border is creating excessive padding on the left and right sides horizontally. Attempted nesting bootstrap grids without success. Can anyo ...

html css angular bootstrap-4 border

javascript calculate average based on user input array

There is a problem that I am trying to solve, but as a beginner it seems quite challenging. Here is the code I have written so far, however, when I run it only one window appears. Any advice or guidance would be greatly appreciated. var years = prompt(" ...

javascript arrays

Creating a custom HTML pattern input for restricting input to only specific numbers

I need to set a specific requirement for the zip code section of my form. Only 5 numbers are allowed, and it must start with either 46,52,53,54,60,61,62 as specified in an html pattern. ...

html forms input

How to download an Excel file (xlsx) using AngularJS and WebApi

I am currently working on a project that requires me to download a report in xlsx format. Despite successfully generating the report file on the server and receiving it on the client side, I am facing an issue where the file is not opening and is resulting ...

javascript c#angularjs excel asp.net-web-api

Create a new array by applying a filtering function to the provided data in JavaScript using React

I am a beginner in the world of React. I have an object containing an array (Map) as follows: "POSSIBLE_UPDATE_OPTIONS": { "Process": ["confirm"], "Confirmed": [ "Process", ...

javascript arrays reactjs

What is the best way to determine if a value from my array is present within a different object?

I have an array with oid and name data that I need to compare against an object to see if the oid value exists within it. Here is the array: const values = [ { "oid": "nbfwm6zz3d3s00", "name": "" ...

javascript typescript vue.js

Are there any CSS attribute configurations that I am overlooking?

Reviewing a colleague's CSS file, I stumbled upon an interesting section. They are a skilled CSS designer, so before jumping to conclusions, I wanted to make sure I am not missing something. In the code snippet below, it seems like they are unintenti ...

The issue I'm facing involves Materialize CSS interfering with the rendering of input fields from PrimeNG. Does anyone have a solution to resolve

The code I am working with is as follows: <div class="container" style="width:100%;"> <div class="ui-widget-header" style="padding:4px 10px;border-bottom: 0 none"> <i class="fa fa-search" style="margin:4px 4px 0 0"></i> < ...

css materialize primeng primeng-datatable

Is it possible to access the ID element of HTML using a variable in jQuery?

I have fetched some data from a JSON ARRAY. These values include Value1,Value2, and Value3. Additionally, I have an HTML checkbox with an ID matching the values in the array. My goal is to automatically select the checkbox that corresponds to the value re ...

javascript jquery html json checkbox

Mobile browser not resizing window width in fluid layout on WordPress site

Currently, I am working on developing a basic web layout that can adapt to mobile view. I have made some progress which you can check out here. The layout successfully adjusts when the window is resized in Firefox or Chrome. However, when I tried to acce ...

jquery html css windows-phone-8 fluid-layout

Sorting tables in Jquery with advanced filter options and seamless integration with an ajax pager

I've implemented a tablesorter library for sorting and filtering data in a table along with a plugin that allows me to paginate the table across multiple pages. Due to the increasing number of records in my table causing slow loading times (>60 se ...

javascript jquery json ajax tablesorter

Incorporating an unique identification code within the input field

I have a HTML code that displays geolocation information: <span id="currentLat"></span>, <span id="currentLon"></span> When combined with JavaScript, it works perfectly. However, I am trying to display the above value in a text fi ...

javascript php html

Apply the "selected" class to the menu located in the common header

I have implemented a menu in the header.php file that will be displayed on all pages such as index.php or contact-us.php. However, I am facing an issue with adding the selected class to the active main category in the menu. The code provided works fine wh ...

php jquery html css submenu

Explore the functions of jQuery's .css() method and the implementation of

Could use some assistance with the .css() method in jQuery. Currently working on a mouseover css menu, and encountering an issue when trying to include this code: $(this).siblings().css({backgroundColor:"#eee"}); at the end of my script. It seems to int ...

The utilization of jQuery's ajax feature is resulting in an unexpected full page refresh when using FireFox browser

Currently, I am facing a bit of a problem with an ajax call using jQuery. It seems to be working perfectly fine in Internet Explorer 7, however, FireFox 3 always initiates a full page refresh whenever the call is made. This ajax call is set to POST to an A ...

asp.net jquery ajax firefox

Mongoose: strange outcomes observed when trying to delete the final element from an array

Update: I made a change in my approach by filtering the array directly and saving it instead of using updateOne and $pull. Surprisingly, this fixed the issue of html elements getting removed. However, the same problem persists when deleting the last item i ...

javascript node.js express mongoose

Retrieve GET ajax requests from a webpage by simply entering the URL

Here's an example from the API I'm currently working with: This particular page relies heavily on GET calls to load most of the data. Three main calls that catch my interest are: All these calls share a common feature, which is the numeric ID ...

javascript php jquery ajax

CSSer Q&A