悬停时出现

我网站上的内容应该被隐藏,并且只有当您将鼠标悬停在浏览器的视口内时,内容才应该显示。左上角的徽标应始终可见且始终可单击。

这意味着当您将鼠标悬停在视口外部时,内容的不透明度将设置为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;}

现在的问题是,当您将鼠标悬停在文本徽标上时,内容会消失。我希望即使将鼠标悬停在文字徽标上也可以看到内容。

有人可以帮我找到解决方案吗?

我希望我能很好地解释我的问题。如果你有任何问题随时问。

非常感谢您的时间和精力。

最好的祝福