試圖揭示懸停在文本上的隱藏文字

我一直在尋找互聯網上的解決方案很長一段時間，但我發現的一切都是按鈕不靈活的寬度。也許我需要使用某種工具提示，這將涵蓋被動狀態？我不確定。

我想要這個元素漂浮在網站的左下角，這就是爲什麼我將位置設置爲固定的原因。

另一個問題是，當文本developed by Jonathan Doe處於活動狀態時，取消激活字段比其應該位於頂部更大。它看起來像0不透明的元素正在搞亂我的hitboxes。我正在試圖玩display: none;，但動畫不播放。

我開始從字面上編碼昨天，所以請原諒我所有的noob錯誤。我試圖理解所有這些背後的邏輯。

我已經添加了這段代碼，我希望我做對了。

.con { 
 
    position: fixed; 
 
    font-weight: normal; 
 
    color: #000000; 
 
    font-family: 'Roboto', sans-serif; 
 
    z-index: 99; 
 
} 
 

 

 
/* © 2017 */ 
 

 
.con.copyright:before { 
 
    position: fixed; 
 
    padding: 9px 16px 7px 16px; 
 
    bottom: 16px; 
 
    left: 16px; 
 
    font-size: 14px; 
 
    line-height: 26px; 
 
    text-align: left; 
 
    content: '© 2017'; 
 
    opacity: 1; 
 
    transition: all 0.3s cubic-bezier(.64, 0, .36, 1); 
 
} 
 

 
.con.copyright:hover:before { 
 
    opacity: 0; 
 
    bottom: 32px; 
 
} 
 

 
.con.copyright:after { 
 
    position: fixed; 
 
    padding: 9px 16px 7px 16px; 
 
    bottom: 0px; 
 
    left: 16px; 
 
    font-size: 14px; 
 
    line-height: 26px; 
 
    text-align: left; 
 
    content: 'developed by Jonathan Doe'; 
 
    opacity: 0; 
 
    transition: all 0.3s cubic-bezier(.64, 0, .36, 1); 
 
} 
 

 
.con.copyright:hover:after { 
 
    opacity: 1; 
 
    bottom: 16px; 
 
}

<div class="con copyright"></div>

我不喜歡你如何保持developed by Jonathan Doe文本活躍超過它快速移動鼠標。

來源

2017-08-12 Tanuki

我花了幾天時間，但我想我終於做到了。 Hitboxes是完美的。現在唯一的問題是，由於某些未知的原因，文本沒有反鋸齒。我在玩一些價值觀，但沒有任何幫助。

編輯：我已經出來了更好的版本。較不混亂，並與工作antyaliasing。

這是新版本 - 也許像我這樣的初學者會發現這有用。

編輯：我：•添加transition-delay和扭轉它，這樣的效果是在"mouseout"

編輯正常播放：我已經：如果我有新發現我會更新•更換visibility: hidden;與pointer-events: none;，因爲有更大的transform: translateY值"mouseout"是出問題•拆分transition: all到transition: transform, opacity和去除transition-delay克服延遲更好地控制

編輯：更好的UX一些小的調整

* { 
 
\t box-sizing: border-box; 
 
} 
 

 
/* copyright */ 
 

 
.copyright { 
 
\t position: fixed; 
 
\t color: #000000; 
 
\t font-family: 'Roboto', sans-serif; 
 
\t font-size: 14px; 
 
\t left: 16px; 
 
\t top: 16px; 
 
\t text-align: left; 
 
\t width: 78px; 
 
\t height: 42px; 
 
\t z-index: 10; 
 
} 
 
.copyright:before { 
 
\t pointer-events: none; 
 
\t position: absolute; 
 
\t display: block; 
 
\t top: 13px; 
 
\t left: 16px; 
 
\t opacity: 1; 
 
\t content: '© 2017'; 
 
\t transform: translateY(0px); 
 
\t transition: transform .24s 0s ease, opacity .16s .08s ease; 
 
} 
 
.copyright:hover:before { 
 
\t transform: translateY(-24px); 
 
\t transition: transform .24s 0s ease, opacity .16s 0s ease; 
 
\t opacity: 0; 
 
} 
 
.copyright_ch { 
 
\t position: absolute; 
 
\t opacity: 0; 
 
\t padding: 13px 0px 0px 16px; 
 
\t top: 0px; 
 
\t left: 0px; 
 
\t pointer-events: none; 
 
\t width: 205px; 
 
\t transition: transform .24s 0s ease, opacity .16s 0s ease; 
 
\t height: 100%; 
 
\t transform: translateY(24px); 
 
} 
 
.copyright:hover .copyright_ch { 
 
\t opacity: 1; 
 
\t pointer-events: auto; 
 
\t transform: translateY(0px); 
 
\t transition: transform .24s 0s ease, opacity .16s .08s ease 
 
}

<div class="copyright"><div class="copyright_ch">developed by Jonathan Doe</div></div>

注：這是不是一個真正的靈活的解決方案。如果你想改變銘文，字體大小，hitbox等，你將不得不手動改變和調整值。爲了更好地瞭解當前的打擊盒，請將background-color: #cccccc;添加到.copyright和.copyright_ch類。您可能還想玩opacity:0/1，這樣您就可以看到您正在處理的內容。

來源

2017-08-16 18:16:40 Tanuki

試圖揭示懸停在文本上的隱藏文字

回答

相關問題