用CSS顯示工具提示僅

我想有input:focus工具提示所以我有什麼：用CSS顯示工具提示僅

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

來源

2013-07-02 BurebistaRuler

任何傷害使用js？ – alwaysLearn

@讓我們的代碼不需要js :)很簡單，但我沒有找到完美的組合:) – BurebistaRuler

http://jquerytools.org/demos/tooltip/form.html – falguni

我將放置在輸入字段後的工具提示（在html），然後使用在相鄰的選擇器（+）：

.containerTooltipXxx input:focus + .hovTol1 {}

DEMO

來源

2013-07-02 07:47:00

非常感謝:) – BurebistaRuler

可以在不更改html層次結構的情況下做到這一點嗎？在我的本地代碼中，我不能在div中插入該段落：（ – BurebistaRuler

不幸的是，您需要在輸入字段之後的某個位置插入段落，以便它們是兄弟。如果要使用可編輯的div而不是輸入元素，也可以把工具提示放到這個div中，或者對於tootip使用'：after'或者'：before'僞對象，但是'before'和'after'不幸的是不能和輸入對象一起使用，所以除非你可以調整html有一點，您將無法根據焦點輸入字段只使用CSS來創建工具提示。 –

用CSS顯示工具提示僅

回答

相關問題