HTML在悬停时显示更多文本

首先，我知道这个问题已经被问到并回答在这里：

但出于某种原因，它根本不适合我！太令人沮丧了。。。我会尽量保持简短

HTML

<ul>
   <li class="servicesfin"><a href=" ">Financial Advising</a></li>
</ul>
<div class="servicesfindesc">
   <p>Offshore Bank accounts, money laundering, hedge funds, tax evasion, investing.</p>
</div>

---

移除可见性：可见和可见性：隐藏；不需要

.servicesfindesc {
    opacity: 0;

}
.servicesfin:hover  {
   opacity: 1;
}

---

您必须将类移动到

，才能使

+

（相邻同级选择器）工作。

.servicesfindesc{
不透明度：0；
可见性：隐藏；
}
.servicesfin:hover+.servicesfindesc{
不透明度：1；
能见度：可见；
}

离岸银行账户、洗钱、对冲基金、逃税、投资

这是因为您在CSS中使用了

+

选择器，它指示HTML中的相邻元素。如果您将DIV移到LI旁边，那么它将工作，尽管它不是正确的HTML，但我只想向您展示一下，因为您使用的是

+

像这样：

离岸银行账户、洗钱、对冲基金、逃税、投资

---

相关：

+

我不认为它会进入

.ServicesFindsc

，因为它在

ul

中，顺便问一下，我可以将其中一些类更改为ID，选择器/同级仍然可以正常工作吗？是的，您可以随意交换类和ID

.servicesfin:hover+.servicesfindsc

与

#servicesfindsc:hover+#servicesfindsc

或

.servicesfin:hover+#servicesfindsc

相同。但是，ID用于唯一的项目，不要混淆这一点。如果你需要不止一次地使用它，那么就使用一个类。我本来打算使用display:block/display:none，但是有人告诉我这不是SEO的好做法。可见性/不透明度是否仍然为搜索引擎显示文本？这不起作用，或者至少不能解决问题。我认为这对我的情况不太起作用。我在页面上有其他的Li被分成2列，其中“Service FunDeSc”出现在它们中间。然后，您被迫使用JavaScript来更改无法通过CSS选择的HTML的其他部分的可见性。你可以添加一个JS mouseover/mouseout函数来显示/隐藏其他HTML。好吧，我不需要坚持使用+，这正是我在引用的另一个页面上看到的。我想我需要仔细阅读css兄弟姐妹。。。谢谢你的链接！下面是一个使用JS控制其他HTML可见性的示例：如果我在ul中有多个li怎么办？那么你必须更改HTML结构。然后你必须在

中添加

元素。因此，我可以将li转换为div，并将它们设置为与li相同的样式，这样所有内容都可以共享一个普通的父元素？使用css，你只能针对兄弟姐妹和孩子，而不能针对父元素。
.servicesfindesc {
    opacity: 0;

}
.servicesfin:hover  {
   opacity: 1;
}

<ul class="floatleft">
   <li class="servicesfin"><a href=" ">Financial Advising</a></li>
    <div class="servicesfindesc">
       <p>Offshore Bank accounts, money laundering, hedge funds, tax evasion, investing.</p>
    </div>
</ul>