Tips for changing the display of input type submit value on hover using CSS in a React Component

I need help with a form that has an <input type="submit" element where the value is set dynamically based on currIntValue.

My goal is to change the displayed value to 'Search' when hovering over the input, instead of showing currIntValue.

I attempted to use two different inputs and toggle their visibility on hover, but this approach is not working as expected. The className="int-val" element hides and reappears repeatedly when hovered over.

Below is a simplified version of my implementation:

.int-val {
  display: inline;
}

.int-val:hover {
  display: none;
}

.search-val {
  display: none;
}

.search-val:hover {
  display: inline;
}
<input type="submit" value={currIntValue} className="int-val"/>
<input type="submit" value='Search' className="search-val"/>

If there's a CSS-only solution to achieve this effect, please point out where I might be making a mistake.

Thank you for your help in advance!

cssreactjssass

Answer №1

Enclose both input elements within a label and utilize the :hover pseudo-class with label.

The reason your CSS is not functioning correctly is due to:

When you hover over .int-val, it hides itself causing it to be out of flow.

Immediately after, when your cursor moves to .search-val, it hides .search-val.

This process repeats when your cursor returns to .int-val, causing a never-ending cycle.

Stack Snippet

.int-val {
  display: inline;
}

label:hover .search-val {
  display: inline;
}

label:hover .int-val {
  display: none;
}

.search-val {
  display: none;
}

input {
  width: 100px;
}
<label>
  <input type="submit" value={currIntValue} class="int-val"/>
  <input type="submit" value='Search' class="search-val"/>
</label>

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

Display a div using Jquery when hovering over it with several classes

I want to create a hover effect where div2 fades in slowly when hovering over div1 within the same container. However, my jQuery code doesn't seem to be working as expected... $(".div").hover(function() { $(this).find(".div2").animate({ opac ...

javascriptjqueryhtmlcss

Unable to locate component in Webdriver-io after navigating to a new route

Situation: When a visitor on my website clicks a specific link, they are directed to a page with text displayed. Challenge: I am attempting to verify if a certain component appears when the user clicks the link. During debugging, I can see the component ...

reactjswebdriver-io

expanding the close window icon beyond the boundaries of the modal container

I seem to be experiencing a CSS mistake that I can't figure out. The close window icon in my modal window is getting cut off at the edge and not displaying properly. Check out this JSFiddle link <div id="sendMsgForm" class="modal"> <div ...

htmlcss

Customize each carousel item by adding a unique background image to enhance the visual appeal

I'm looking to customize my Bootstrap carousel by adding unique background images to each item. Here's a snippet of my HTML: <!-- Start of carousel --> <div id="mainCarousel" class="carousel slide carousel-fade" d ...

htmlcssbootstrap-5

Changing the custom route in React Router to utilize a render prop instead of the component prop

I'm currently working on a React app that incorporates React Router. I've been encountering a bug in my code stemming from my custom ProtectedRoute component: const ProtectedRoute = ({ component, ...args }) => ( <Route component={with ...

javascriptreactjsreact-routerreact-router-domauth0

Dynamically hiding elements within tabs using jQuery

Previously, I created a functionality for handling a single set of tabs. However, as the application has expanded, this functionality is no longer sufficient to accommodate multiple sets of tabs. The initial function looked like this: var iconTabs = func ...

javascriptjqueryhtmlcss

Encountering 'no overload matches this call' while developing a useReducer using React with Typescript

import { useCallback, useReducer } from "react"; const ARTIST_REDUCER_TYPES = { ADD: "ADD", }; const artistArray = [...Object.values(ARTIST_REDUCER_TYPES)] as const; type ActionReturnedTypes = (typeof artistArray)[number]; type Re ...

reactjstypescript

Solving the issue of duplicate activeClassName in React

I struggle with English, but I am proficient in React js. Currently, I am utilizing activeClassName(), which is causing me some issues. My goal is to structure my website's URL as follows: localhost:3000/icons/ localhost:3000/icons/docs/ loc ...

reactjsreact-router

Is it possible to customize the borders of boxes in Google Charts Treemap?

Although this may seem like a minor issue, I can't find any information in the documentation. I'm currently using Google Charts treemap for monitoring a specific project. The problem I'm facing is that when all the parent level rectangles ar ...

cssgoogle-visualizationtreemap

Tips for evaluating style modifications on mouseover using cypress

Trying to test hover styles on table rows but encountering issues: Here is the code snippet I am testing: it("Table rows should display correct hover styles", () => { cy.get("table>tbody>tr").each(($el, index, $list) =&g ...

htmlcsscypresse2e-testing

The select box in Material UI is not displaying the data as expected

I'm currently tackling an issue where, upon every click of an icon, a select box (from material ui) needs to be displayed with a few options inside it. The functionality should show the select box each time the icon is clicked. Here's a brief sum ...

javascriptreactjsmaterial-ui

Ways to adjust the anchor and h1 elements using CSS

I'm working on an HTML document with some markup, <a class="home-link" href="index.html" rel="home"> <h1 class="site-title">John Arellano's Personal Website</h1> </a> While styling the site title, I encountered a problem ...

htmlcss

How to Enhance Your MUI DataGrid Rows with Borders

Trying to customize the borders of Material UI DataGrid rows to achieve a design similar to this screenshot (with some info censored): https://i.stack.imgur.com/0xRFd.png The issue I'm facing is that I'm unable to display the right border correc ...

cssreactjsmaterial-uidatagrid

Setting the background color in the navbar of a Laravel application

I'm having trouble changing the color of my navbar to blue in certain parts. I've tried using background: lightblue;, but for some reason, two sections remain white. How can I make them completely blue? (see screenshot below) Any help would be ap ...

csslaravelcolorsbackground-color

Error: The function sort cannot be applied to the result of calling the calendar method on the moment object

I retrieve the data from this URL. I am looking to display the data sorted by a recent date. I attempted to use the map method to render the data and then proceeded to sort it based on the date, but encountered an error. To organize the dates, I made use ...

javascriptreactjssortingmapping

Is there a way to slow down the falling effect on my navigation bar?

As I was working on my personal website, I had a creative idea to add a falling-down animated effect instead of keeping the layout fixed. Utilizing bootstrap for navigation, I encountered some difficulty in controlling the speed of the falling effect. Any ...

javascripthtmljquerycssbootstrap-5

Fascinating CSS rendering glitch observed on zooming in: all browsers create a noticeable gap between containers except for Firefox

I'm experiencing a rather intriguing and peculiar issue with css styles when zooming in and out on the browser. Specifically, I've created a material ui card where the background-color changes upon clicking with an animation effect. The animati ...

javascripthtmlcssreactjsmaterial-ui

Is it possible for me to move a function into a utils file and then incorporate it into a React component, all while passing a function from the component to it?

I'm in the process of moving my getFontColor() function to a utils folder in order to call it from a component. However, this function relies on another function within the component (getBgColor()). How can I pass getBgColor to the util function and t ...

javascriptreactjsfunction

How to style 1 out of every 3 div elements using absolute positioning in CSS

Imagine a setup where there is a banner at the top, with 3 divs placed side by side underneath it. The interesting part is that when you scroll down, only the center and right div should move along. #banner { background:blue; color:white; position ...

htmlcss

Leveraging ChartIQ within a NextJS environment

After recently downloading the trial version of ChartIQ SDK from this website, I found that it works well on a React project. However, when I switched to Next.js, certain features are no longer usable. There are three specific problems I am encountering in ...

reactjsnext.jschartiq