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

Question

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

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 样式。

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

Answer 1

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

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

另一种方法是稍微重组 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/

Answer 2

您可以为输入框添加透明背景并将图标放在绝对下方（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

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

Input label hover issue with absolute positioning

html

css

hover

css-selectors

pseudo-class