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

Question

我有<input type="text"/> 和:hover 上的样式，例如：

input:hover {
    border-color: red;
}

我想在我的输入中添加搜索图标。当我将鼠标悬停在图标上时，输入:hover 样式效果很好，试试吧：

JSFiddle

input, span {
    display: inline-block;
    vertical-align: middle;
    height: 30px;
}

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;
}

<label>
    <input type="text"/>
    <span></span>
</label>

但如果我将搜索图标直观地放在输入上，则当我将图标悬停时，输入 :hover 样式将不适用：

JSFiddle

label {
    position: relative;
}

input, span {
    display: inline-block;
    vertical-align: middle;
    height: 30px;
}

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;
}

<label>
    <input type="text"/>
    <span></span>
</label>

问题：我可以解决这个问题吗？当我将输入悬停在任何点时，我想应用输入 :hover 样式。

PS 我知道我可以在<label> 上设置:hover 样式或使用Javascript/jQuery 设置它，但我不想这样做，因为我有很多使用@987654335 的案例@ 而在其他情况下，我没有<label> 和一个图标，只有<input>。我想要没有它的解决方案。

Answer 1

您可以为输入添加透明背景并将图标绝对放置在其下方（z-index 较小）。

    * {
        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;
    }

这是Fiddle

Answer 2

一种解决方案是添加 poiter-events 规则：

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 -->
}

演示：http://jsfiddle.net/kfgggd1b/4/

但不是很好支持：http://caniuse.com/#search=pointer

另一种方法是通过在输入之前放置 span 来稍微重组 HTML，然后

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;
}

演示：http://jsfiddle.net/kfgggd1b/5/