Question

=“”

我有一张<input type="submit"的表单，value动态设置（currIntValue）。

目标是将value显示为＆＃39;搜索＆＃39;当输入悬停时，而不是currIntValue。

我想在悬停时制作两个输入并隐藏/取消隐藏，但这并不是预期的结果。基本上className="int-val"隐藏在徘徊时，并且会重复出现/消失。

以下是我要在上面描述的内容的基本实现：

＆＃13;

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

＆＃13;

<input type="submit" value={currIntValue} className="int-val"/>
<input type="submit" value='Search' className="search-val"/>

＆＃13;

如果可以使用CSS，我哪里出错了？

提前致谢！

Answer 1

将input包裹在label中，然后在:hover中使用label。

你的css无法正常工作，因为

..当您悬停在.int-val上时，它会隐藏自己（变得不流动）

..然后您的光标立即显示在隐藏.search-val

的.search-val

..然后你的光标再次出现在.int-val再次隐藏自己

..这个过程变得永无止境。

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>

如何显示<input type =“submit”on =“”hover =“”with =“”css =“”within =“”a =“”react =“”component =“”

1 个答案: