父級懸停時啓用輸入元素

佈局非常簡單，可以在引腳中生成彈出窗口。我做了這個簡單的HTML：父級懸停時啓用輸入元素

<div class="pin"> 
    <div class="popup"> 
    <div class="arrow1"></div> 
    <div class="arrow2"></div> 
    <div class="content"> 
     text... 
    </div> 
    </div> 
</div>

當你懸停.pin元素，彈出應顯示了動畫漸變。所以.popup元素具有CSS：

z-index: -1; 
opacity: 0; 
transition: all 0.25s ease 0s;

而當你將鼠標懸停在.pin，那麼這個CSS將適用（注意我用SASS/SCSS語法）：

&:hover, &.active { 
    .popup { 
    z-index: 9; 
    opacity: 1; 
    } 
}

全部工作示例：jsFiddle

我使用z-index -s因爲我的問題：即使您輸入.popup元素應該在的位置，彈出窗口也會顯示。這是合乎邏輯的，因爲它只有opacity: 0;，但我該如何解決？ .popup只有在您將鼠標懸停在.pin後才能打開，之後您可以將鼠標移動到.popup元素中，例如選擇文本。我知道我可以用display: none/block;做到這一點，但我沒有動畫。你可以幫幫我嗎？

來源

2017-02-18 debute

使用visibility

jsFiddle demo

最初：

visibility: hidden;  /* add this */ 
opacity: 0; 
transition: 0.3s;

當引腳徘徊：

visibility: visible;  /* and this */ 
opacity: 1;

來源

2017-02-18 10:36:09

人，你救了我的天！謝謝！ – debute

@debute：D很高興聽到這個消息;）沒問題 –

您可以使用pointer-events

Updated fiddle

.popup { 
    position: absolute; 
    top: 4px; 
    left: -218px; 
    width: 230px; 
    font-size: 13px; 
    z-index: -1; 
    opacity: 0; 
    transition: all 0.25s ease 0s; 
    pointer-events: none;   /* added property */

&:hover, &.active { 
    .popup { 
     z-index: 9; 
     opacity: 1; 
     pointer-events: auto;   /* added property */ 
    } 
    }

來源

2017-02-18 10:45:18 LGSon

謝謝，以前不知道'pointer-events'。 – debute

父級懸停時啓用輸入元素

回答

相關問題