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

Question

我想在输入框聚焦时隐藏输入框的图标，我的代码如下。

.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" >

这不能使我的图标在输入框聚焦时隐藏起来，谁能告诉我为什么会出现这样的问题？

Answer 1

根据你的代码，.errspan应该直接放在输入框的后面，而看你的DOM代码，这个span是在输入框的前面。

在下面的代码段中，我把跨度放在输入下面，你的代码就能正常工作:)

.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

Answer 2

你可以Javascript和做。if (document.getElementById("InputId").selected == true){document.getElementById("photoId").style.opacity = "0.0"}就是这样。

有什么问题可以问我。