Troubleshooting the malfunction of the CSS display property

I've created a div with a number displayed initially. When I hover over the div, the number disappears and a paragraph is revealed. Upon hovering out, the paragraph hides and the number reappears.

My attempts to achieve this using CSS (display: none and display: block) and jQuery (show() and hide()) have had mixed results. Sometimes, both the number and paragraph vanish, requiring me to refresh the page to restore them. The functionality seems more reliable in Chrome compared to other browsers, but it still isn't perfect even there.

You can test this on the live page here.

The code snippet for this feature looks like:

div h2 {
   display: block;
}

div:hover h2 {
   display: none;
}

div p {
    display: none;
}

div:hover p {
    display: block;
}

If anyone has suggestions on how to improve this behavior, please let me know!

javascriptjqueryhtmlcssshow-hide

Answer №1

This is a basic program example:

<div id="exampleDiv">
    <p class="number">1</p>
    <p class="text" class="hidden">Lorem Ipsum</p>
</div>

<style>
  .hidden {
    display: none;
  }
</style>

<script>
 $(function() {
    $('#exampleDiv').on('mouseover', function() {
      if($(this).find(".text").hasClass("hidden")) {
          $(this).find(".text").removeClass("hidden");
          $(this).find(".number").addClass("hidden");
      }
      else {
          $(this).find(".text").addClass("hidden");
          $(this).find(".number").removeClass("hidden");
      }
    });
  });
</script>

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

Re-establishing the socket channel connection in a React application after a disconnection

There are several solutions to this issue, but none of them seem to be effective for me. The existing solutions are either outdated or do not meet my needs. I am facing a problem where I have a large amount of data being transferred from the server to the ...

javascriptreactjssocket.ionext.jsfastify

Using JQuery to Dynamically Add Elements with JSON

I am working with a JSON variable called myCollection, and its structure is as follows: var myCollection = { "data": [ { "name":"Joe", "id":"1" }, { "name":"Bill", "id":"2" }, { "name":"Dave", "id":"3" } ] }; Recently, I encountered an is ...

jqueryjson

Chrome is inaccurately reporting the outerHeight value, while IE and FireFox are displaying it correctly

The jquery.smartWizard plugin includes a function called fixHeight that adjusts the height of a wizard step. It is utilized when displaying a step for the first time or revealing hidden divs within the step. The function works correctly in IE and FireFox, ...

javascriptjquerycssgoogle-chromesmart-wizard

Retrieve a targeted tag from the API snippet

I need to extract the IMG SRC tag from the given code: <pod title="Scientific name" scanner="Data" id="ScientificName:SpeciesData" position="200" error="false" numsubpods="1"> <subpod title=""> <plaintext>Canis lupus familiaris</plain ...

phphtmlimagetagssrc

Using React Native to integrate a JSON string into a button

I'm currently working on an app to explore the functionality of websockets in react native. I have successfully retrieved data from the websocket in JSON format and can output it to the console using console.log. However, my goal is to display a speci ...

javascriptjsonreact-nativewebsocket

Nested structure of jQuery: child div inside a td inside another div element

I am attempting to target a specific set of DIV elements that are nested within TD elements. These particular TD elements are located inside a table within another DIV. The main parent DIV has been assigned a unique ID, and the TD elements have a distinct ...

jquery

The Date.UTC function is not providing the correct output

While attempting to change Unix timestamps into a more understandable format, I used Date.UTC(2017,09,23);. When running this code, it returned 1508716800000. However, upon verifying on the website , the displayed result showed October 23, 2017 instead o ...

javascript

What is the most effective way to extract data from a .dpbox table using selectorgadget in R (rvest)?

Recently, I've been experimenting with web scraping data from different websites using selectorgadget in R. One successful example was when I extracted information from . My usual approach involves utilizing the selectorgadget Chrome extension to choo ...

htmlcssrweb-scrapingrvest

What is the process to modify the color of text that has been _selected_ within a `St.Entry` component in a Cinnamon Applet for the Gnome

I am facing an issue with a St.Entry widget in my Cinnamon applet where the text color is set to black using CSS. However, the selection color of this widget is also black, causing selected text to be unreadable in the theme I am using:https://i.stack.imgu ...

cssgnome-shell-extensionsgjscluttercinnamon

Create a new instance of the TypeScript singleton for each unit test

I have a TypeScript singleton class structured like this: export default class MySingleton { private constructor({ prop1, prop2, ... }: MySingletonConfig) { this.prop1 = prop1 ?? 'defaultProp1'; this.prop2 = prop2; ...

javascriptnode.jstypescriptjestjs

Tips for creating different CSS print layouts within a single-page application

I am working on a single page application with multiple sections that need to display a list of images on separate pages. I was considering using iframes for this task, but I'm looking for advice from someone who has experience with similar situations ...

javascripthtmlcsssingle-page-applicationprinting-web-page

What is the best way to implement a loading cursor when the Submit button is clicked?

Is there a way to incorporate a progress cursor into my code in order to notify the user to wait when they click the Submit button or the Upload Button while uploading multiple files? Below is an example of my form: <form action="" method="post" enct ...

javascriptjquerycsshtmlforms

Can the globalcompositeoperation=source-over attribute be applied to putimagedata?

Is it possible to use ctx.globalcompositeoperation=source-over in conjunction with putimagedata, or is it exclusive to drawimage? ...

javascripthtmlhtml5-canvas

"Is it possible to make a JSON API call in Node.js before exiting with a SIGINT

In my attempt to configure certain variables and make an API call using the request module before exiting the program, I encountered issues where the function was not being properly executed due to the presence of both SIGINT and exit signals: const reque ...

javascriptnode.jsasync-awaitexitsigint

Tips for invoking a function in a Firefox extension using an HTML button

Is there a way to trigger a custom JavaScript function from my browser extension when a button on my web page is clicked? I am looking for a solution where a button click event on my HTML page can invoke a specific function that is defined within my Firef ...

javascripthtmlfirefox-addon

Change the behavior of an onclick event on the second click

I'm trying to make a button on my website that not only plays music when clicked but also changes the text inside the button to "Go to SoundCloud" and redirects to SoundCloud. Currently, I have been able to achieve both functions separately - redirect ...

javascriptjquery

Dynamically adjusting the background color of table elements using JavaScript

Snippet code copied from this link In my app, clicking on the Add New Item button dynamically adds rows. Clicking on any number in the table populates it in the corresponding row. Hovering over the 1st row changes its background color to green along with ...

javascriptjquerycss

What is the best way to display the angular bootstrap modal only upon the initial page load?

Even though I am only intending to show the bootstrap modal on page load, it is triggering every time the route changes. For example, if I return to the same page from another page using the browser's back or forward buttons, the modal is shown again. ...

javascriptangularjssessionbootstrap-modalangular-bootstrap

"Enhance your website with jQuery autocomplete: displaying and structuring various elements

Finding the right jquery/ui autocomplete tutorial can be overwhelming, as there are numerous different approaches available. It's challenging to determine the correct method, understand why it's necessary, and learn how to enhance it. After succ ...

phpjqueryjquery-uicodeigniterjquery-ui-autocomplete

What is the reason the 'Add' type does not meet the 'number' constraint?

I experimented with type gymnastics using Typescript, focusing on implementing mathematical operations with numeric literals. First, I created the BuildArray type: type BuildArray< Length extends number, Ele = unknown, Arr extends unknown ...

javascripttypescript