我网站上的内容应该被隐藏,并且只有当您将鼠标悬停在浏览器的视口内时,内容才应该显示。左上角的徽标应始终可见且始终可单击。
这意味着当您将鼠标悬停在视口外部时,内容的不透明度将设置为0。当您将鼠标悬停在视口内部时,不透明度将被设置为1。
我将内容放在类为.content的div中,如下所示:
HTML
<div class="content"></div>
CSS
.content { opacity: 0; transition: .5s; }
.content:hover { opacity: 1; }
它运作完美。
I also added a text logo with a link that should take the visitor always back to the homepage on the top left.
<a class="logo" href="#">Logo</a>
.logo {position: fixed; top: 10px; left: 10px;}
现在的问题是,当您将鼠标悬停在文本徽标上时,内容会消失。我希望即使将鼠标悬停在文字徽标上也可以看到内容。
有人可以帮我找到解决方案吗?
我希望我能很好地解释我的问题。如果你有任何问题随时问。
非常感谢您的时间和精力。
最好的祝福