Question

我似乎无法获得CSS：悬停正常工作。

当您将鼠标悬停在“我的网站”上时，我正在尝试显示一个不透明度设置为0的文本框。我已经用图像实现了类似的功能，但不能仅使用文本。

我试过了：hover和p：hover，两者都不起作用。

<div class="site">
                <p style="padding: 10px;"><a href="myWebsite.html" id="Home">My Website</a></p>
                <p id="siteText">This is my primary website where all the information you might require on me is available! This site is also a demonstration of my work; however, external reviews are available on the website!</p>
            </div>

#siteText {
    background-color: rgba(255,255,255,0.8);
    text-align: center;
    width: 475px;
    padding: 15px;
    position: absolute;
    left: 50%;
    opacity: 0;
    transform: translate(-50%, -50%);
}

#Home a:hover + #siteText {
    opacity: 1;
}

Answer 1

标记有几个基本问题。

您的a元素在内p元素，然后 siteText内容。因此，选择器a:hover + #siteText 无法正常工作，因为a和#siteText 不是直接兄弟姐妹。
在您的CSS中，您有#Home a:hover，其中#Home 是a元素。这应该只是#Home:hover。
#siteText的某些其他样式（变换，位置等）导致它出现在屏幕外，所以我在下面删除它们以演示调整后的HTML / CSS效果。

另外，我建议你不使用ID来做这样的事情。相反，以全球方式思考。也就是说，使用可重复的类/标记组合，而不必继续向CSS添加更多ID。在下面的示例中，我将#siteText（ID）更改为.tooltip的类 - 然后，调整CSS以便现在，只要您有a } element后面紧跟一个类为tooltip的元素，你将有一个正常运行的悬停效果。

以下是一个工作片段：

.tooltip {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  width: 475px;
  padding: 15px;
  opacity: 0;
}

.pad-vertical {
    display: inline-block;
    padding: 10px 0;
}

a:hover + .tooltip {
  opacity: 1;
}

<div class="site">
  <div><a class="pad-vertical" href="myWebsite.html" id="Home">My Website</a>
    <p class="tooltip">This is my primary website where all the information you might require on me is available! This site is also a demonstration of my work; however, external reviews are available on the website!</p>
  </div>
</div>

<强>更新
我在a元素中添加了一些填充。请注意，我已经通过一个类重新完成了这一操作，因此您可以使用a元素上的类，您可能需要这样填充。

CSS：尝试显示不透明文本框时出现悬停问题

1 个答案: