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

Posted 2023-03-06

【中文标题】绝对定位的输入标签悬停问题

【英文标题】：Input label hover issue with absolute positioning

【发布时间】：2015-12-04 09:23:26

【问题描述】：

我有<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>。我想要没有它的解决方案。

【参考方案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

【讨论】：

跨浏览器支持的好解决方案。

【参考方案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/

【讨论】：

pointer-events: none 真的很好。对于我的情况，我更喜欢这种解决方案。