爲什麼當其他工作正常時，此工具提示會崩潰？

凝視並沒有幫助。這<span>內<button>應該顯示在:hover，其他人這樣做。但是這個沒有。它與CSS有關，因爲如果我將它們放在同一個類上，那麼.tooltipBR也會發生同樣的情況。爲什麼當其他工作正常時，此工具提示會崩潰？

Codepen：http://codepen.io/briligg/pen/epqNLd?editors=110

相關CSS：

.tooltipBR span:after { 
    top: 18px; 
    right: 100%; 
    margin-top: -8px; 
    border-right: 8px solid #000000; 
    border-top: 8px solid transparent; 
    border-bottom: 8px solid transparent; 
} 
:hover.tooltipBR span { 
    left: 75%; 
    top: -8px; 
    margin-left: 100%; 
} 

.tooltipT, .tooltipTML, .tooltipTL, .tooltipTMR, .tooltipTR, .tooltipL, 
.tooltipML, .tooltipR, .tooltipMR, .tooltipB, .tooltipBML, .tooltipBL, .tooltipBBL, .tooltipBMR, 
.tooltipBR { 
    position: absolute; 
} 
.tooltipT span, .tooltipTML span, .tooltipTL span, .tooltipTMR span, 
.tooltipTR span, .tooltipL span, .tooltipML span, .tooltipR span, 
.tooltipMR span, .tooltipB span, .tooltipBML span, .tooltipBL span, .tooltipBBL span, 
.tooltipBMR span, .tooltipBR span { 
    position: absolute; 
    width:400px; 
    color: #FFFFFF; 
    background: #000000; 
    height: auto; 
    line-height: 1.2em; 
    text-align: right; 
    visibility: hidden; 
    border-radius: 6px; 
} 
.tooltipT span:after, .tooltipTML span:after, .tooltipTL span:after, .tooltipTMR span:after, 
.tooltipTR span:after, .tooltipL span:after, .tooltipML span:after, .tooltipR span:after, 
.tooltipMR span:after, .tooltipB span:after, .tooltipBML span:after, .tooltipBL span:after, 
.tooltipBBL span:after, .tooltipBMR span:after, .tooltipBR span:after { 
    content: ''; 
    position: absolute; 
    width: 0; height: 0; 
    z-index: 10; 
} 
:hover.tooltipT span, :hover.tooltipTML span, :hover.tooltipTL span, :hover.tooltipTMR span, 
:hover.tooltipTR span, :hover.tooltipL span, :hover.tooltipML span, :hover.tooltipR span, 
:hover.tooltipMR span, :hover.tooltipB span, :hover.tooltipBML span, :hover.tooltipBL span, 
:hover.tooltipBBL span, :hover.tooltipBMR span, :hover.tooltipBR span:after { 
    visibility: visible; 
    background-color: rgba(0, 0, 0, 0.8); 
    padding: 8px; 
    z-index: 10; 
    }

來源

2015-12-05 kim holder

在你最後的CSS塊中的最後選擇是:hover.tooltipBR span:after，但該組中所有其他選擇的是:hover.foo span。 .tooltipBR span:after由您的第一個塊處理。我認爲你需要從最後一個選擇器中刪除:after，以使其與其他選項一樣。

來源

2015-12-05 20:21:07 hobbs

謝謝，夥計。我知道我對某件事情是盲目的，但我無法找到它，並決定依靠別人的眼睛。歡呼:) –

如果這個答案是你的問題的解決方案，請將其標記爲正確的答案。 – Sablefoste

@Sablefoste我不得不等幾分鐘才能讓我。好，以確保提醒。 –

嘗試將:hover置於id或類名的末尾。而不是:hover.tooltipT，這樣編碼：.tooltipT:hover。

來源

2015-12-06 05:33:13 JenTrixx16

啊，是的，這是正確的語法。我會改變它。 –

爲什麼當其他工作正常時，此工具提示會崩潰？

回答

相關問題