html - 输入范围未显示为链接

Question

此处页面顶部橙色输入中的搜索玻璃图标未显示为链接，因此当将鼠标悬停在指针上时不会显示..任何想法为什么会这样？

这是CSS：

.searchGlass {
background-image: url(/images/searchicon.png);
background-position: left 1px;
background-color: rgba(0, 0, 0, 0);
display: block;
height: 18px;
position: relative;
top: -24px;
width: 15px;
background-repeat: no-repeat;
left: 7px;
}

.hideText {
text-indent: 125%;
white-space: nowrap;
overflow: hidden;
}

.submit {
margin: 1em 0 0 0;
width: 30px;
height: 30px;
text-transform:uppercase;
font-size:15px;
padding: 6px 13px;
cursor:pointer;
border-radius: 20px;
}

和html：

<div class="left"><input type="submit" class="submit hideText" value=""/><span class="searchGlass hideText">Go</span></div>

非常感谢。

Answer 1

从这里尝试：

<div class="left">
     <button class="submit"><span class="searchGlass hideText">Go</span></button>
</div>

和 CSS：

.searchGlass {
    background-color: transparent;
    background-image: url("/images/searchicon.png");
    background-position: left 1px;
    background-repeat: no-repeat;
    display: block;
    height: 18px;
    position: relative;
    width: 15px;
}

Answer 2

您始终可以通过 javascript 提交：

<a href="#" onclick="submit();"><span class="searchGlass hideText">Go</span></a>

Answer 3

span 的默认显示是内联的，您必须将其更改为阻塞，然后将其浮动到您想要的位置，然后您将能够但宽度和高度
在 CSS 中尝试

.hideText {
  text-indent: 125%;
  white-space: nowrap;
  overflow: hidden;
  width:50px; /* 50px is just assumed value, put yours */
  height:50px;
  display:block
  float:left;
}