Html 绝对定位输入标签悬停问题

我有

和

:hover

上的样式，例如：

input:hover {
    border-color: red;
}

我想在输入中添加搜索图标。输入<代码>：悬停当我将鼠标悬停在图标上时，样式会很好地应用，请尝试：

输入，span{
显示：内联块；
垂直对齐：中间对齐；
高度：30px；
}
输入：悬停{
边框颜色：红色；
}
跨度{
背景：url(https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-128.png)50%50%/100%100%不重复；
宽度：25px；
高度：25px；
}

---

一种解决方案是添加poiter事件规则：

span {
    background: url(https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-128.png) 50% 50%/100% 100% no-repeat;
    width: 25px;
    height: 25px;
    position: absolute;
    top: -4px;
    right: 4px;
    pointer-events: none; <!-- this line -->
}

---

演示：

您可以将透明背景添加到输入中，并将图标绝对放置在其下方（z索引更少）

---

这里有一个

指针事件：无

是非常好的一点。对于我的情况，我更喜欢这个解决方案。跨浏览器支持的好解决方案。

span:hover + input, 
input:hover {
    border-color: red;
}
span {
    background: url(https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-128.png) 50% 50%/100% 100% no-repeat;
    width: 25px;
    height: 25px;
    position: absolute;
    top: -4px;
    right: 4px;
}

    * {
        box-sizing: border-box;
    }
    label {
        position: relative;
        display: inline-block;
        background: white;
    }
    input {
        width: 100%;
        border: 1px solid #000;
        height: 30px;
        outline: none;
        position: relative;
        z-index: 2;
        background: transparent;
    }
    input:hover {
        border-color: red;
    }
    span {
        background: url(https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-128.png) 50% 50%/100% 100% no-repeat;
        width: 25px;
        height: 25px;
        margin-top: -13px;
        position: absolute;
        top: 50%;
        right: 4px;
        z-index: 1;
    }