Question

我希望input:focus上有一个工具提示，所以我拥有：

HTML：

<div class="containerTooltipXxx">
    <p class="hovTol1">Tooltip description is here</p>
    <div class="blocks">
    <label>Field</label>  <input></input></div>
</div>

CSS：

.containerTooltipXxx{
    padding: 20px; 
    position: relative;
    float: left;
    display: inline-block;
    border: 2px solid lime;
    margin: 50px;
}

.hovTol1{display: none;}

.containerTooltipXxx:hover > .hovTol1{
    display: block;
    position: absolute;
    top:-5px;
    left: 50px;
    background: red;
}

将鼠标悬停在containerTooltipXxx div上时效果很好，但是当输入聚焦时我需要显示工具提示，所以我尝试过这样的事情：

.containerTooltipXxx input:focus> .hovTol1{
    display: block;
    position: absolute;
    top:-5px;
    left: 50px;
    background: red;
}

但是没有工作，所以如果有人可以帮我这个，谢谢你。

fiddle

Answer 1

我会将工具提示放在输入字段之后（在html中），然后使用相邻的选择器（+）：

.containerTooltipXxx input:focus + .hovTol1 {}

DEMO

仅显示带有css的工具提示

1 个答案: