在输入焦点上隐藏 html 中的图标不起作用答案

【问题标题】：hiding icon in html on input focus not working在输入焦点上隐藏 html 中的图标不起作用
【发布时间】：2020-06-17 09:31:31
【问题描述】：

我试图在输入框获得焦点时隐藏输入框上的图标，我的代码如下：

.errspan {
  top:37px;
  left: 35px;
        float: left;
        position: relative;
        z-index: 5;
        color: #f2136e;
        font-size: 18px;
    }
.samaraveera:focus + .errspan {display: none;}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<span class="fa fa-phone errspan"></span>
						<input class="samaraveera" type="text" >

当输入框聚焦时，这不会让我的图标隐藏，谁能告诉我为什么会出现问题？提前致谢

【问题讨论】：

标签： javascript html css input focus

【解决方案1】：

您正在尝试根据您的代码设置 .errspan 的样式，该样式应直接放在输入的后面，并查看您的 DOM 代码，跨度位于输入的前面，

在下面的 sn-p 中，我将跨度放在输入下方，您的代码可以正常工作:)

.errspan {
  top:37px;
  left: 35px;
        float: left;
        position: relative;
        z-index: 5;
        color: #f2136e;
        font-size: 18px;
    }
.samaraveera:focus + .errspan {display: none;}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<input class="samaraveera" type="text" >
<span class="fa fa-phone errspan"></span>

更多关于 + 运算符的信息在这里：w3schools

【讨论】：

【解决方案2】：

您可以使用 Javascript 并执行以下操作：if (document.getElementById("InputId").selected == true){document.getElementById("photoId").style.opacity = "0.0"}就是这样。

有任何问题都可以问我。

【讨论】：