HTML显示更多悬停文本

Question

首先，我知道这个问题已经在这里被问到并得到了回答：悬停显示内容的CSS

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

<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>

CSS

.servicesfindesc {
opacity: 0;
visibility: hidden;
}

.servicesfin:hover + .servicesfindesc {
opacity: 1;
visibility: visible;
}

Answer 1

您必须将类移动到<ul>，以使+ (相邻的同胞选择器)工作。

.servicesfindesc {
  opacity: 0;
  visibility: hidden;
}
.servicesfin:hover + .servicesfindesc {
  opacity: 1;
  visibility: visible;
}

<ul class="floatleft servicesfin">
   <li><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;
  visibility: hidden;
}
.servicesfin:hover ~ .servicesfindesc {
  opacity: 1;
  visibility: visible;
}

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

​

参考资料：邻接同胞选择器 - 普通同胞选择器

Answer 2

这是因为您在CSS中使用+选择器，它指示HTML中的相邻元素。如果您将DIV与您的LI一起移动，那么它将工作，虽然它不是适当的HTML，但我只想向您展示一下，因为您使用的是+。

就像这样：http://jsfiddle.net/scottcanoni/tsyndeuj/2/

<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>

相关：在CSS中是什么意思？

Answer 3

删除可见性:可见和可见:隐藏；不需要

.servicesfindesc {
    opacity: 0;

}
.servicesfin:hover  {
   opacity: 1;
}