Question

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

我希望这个元素浮动在网站的左下角，这就是我将位置设置为固定的原因。

另一个问题是，当文本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文本处于活动状态。

Answer 1

我花了几天时间，但我想我终于做到了这一点。 Hitboxes非常完美。现在唯一的问题是，由于某种未知的原因，文本不是抗锯齿的。我正在玩一些价值但没有任何帮助。

编辑：我推出了更好的版本。不那么凌乱，也没有工作的抗议。

这是新版本 - 也许像我这样的初学者会觉得这很有用。如果我发现任何新内容，我会更新它：

编辑：我已经：•添加了transition-delay并将其撤消，以便在"mouseout"正确播放效果

编辑：我已经：visibility: hidden;替换为pointer-events: none;，因为transform: translateY值"mouseout"值较大，因此出现问题•分裂{ {1}}移至transition: all并移除transition: transform, opacity以更好地控制延迟

编辑：为改善用户体验进行微调

＆＃13;

transition-delay

＆＃13;

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

＆＃13;

注意：这不是一个灵活的解决方案。如果您想更改铭文，字体大小，命中框等，则必须手动更改和调整值。为了更好地了解当前的热门游戏，请将<div class="copyright"><div class="copyright_ch">developed by Jonathan Doe</div></div>添加到background-color: #cccccc;和.copyright类。您可能还想使用.copyright_ch opacity: / 0，以便了解您正在使用的内容。

试图在悬停时显示隐藏文字 - 在

1 个答案: