How to Display different value of

Question

I have a form with <input type="submit" for which the value is set dynamically (as currIntValue).

The goal is to have the value displayed as 'Search' when the input is hovered, instead of the currIntValue.

I thought to make two inputs and hide/ unhide each on hover but this isn't having the expected result. Basically the className="int-val" hides when hovered and quickly reappears/ disappears repetitively.

Here is a basic implementation of what I am trying to describe above:

.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 this is possible just using CSS, where am I going wrong?

Thanks in advance!

`className` is javascript/react. Are you writing React or HTML? — mpen, Jan 23 '18 at 17:20
I think this is what you are looking for https://stackoverflow.com/questions/8860058/change-text-on-mouse-over-and-change-back-on-mouse-out — GLalor, Jan 23 '18 at 17:22
@GLalor Yes, I did see that solution but wrapping each in spans did not seem to work — David Sawatske, Jan 23 '18 at 17:38

Bhuwan · Accepted Answer · 2018-01-23T17:54:44.580

Wrap both input into a label and then use :hover in label.

Your css is not working because

..when you hover on .int-val, it hide itself (becomes out of flow)

..then immediately your cursor comes at .search-val which hide .search-val

..then again your cursor comes at .int-val which hide itself again

..and this process became like never ending process.

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>

```label``` worked. Could you possibly help me understand why? — David Sawatske, Jan 23 '18 at 17:47

How to Display different value of

1 Answers1