试图揭示悬停在文本上的隐藏文字

问题描述：

我一直在寻找互联网上的解决方案很长一段时间，但我发现的一切都是按钮不灵活的宽度。也许我需要使用某种工具提示，这将涵盖被动状态？我不确定。

我想要这个元素漂浮在网站的左下角，这就是为什么我将位置设置为固定的原因。

另一个问题是，当文本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文本活跃超过它快速移动鼠标。

答

我花了几天时间，但我想我终于做到了。 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，这样您就可以看到您正在处理的内容。

试图揭示悬停在文本上的隐藏文字

相关推荐