HTML在悬停时显示更多文字

Question

首先，我知道这个问题已在此处提出并回答：CSS on hover show content

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

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>

CSS

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

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

Answer 1

您必须将班级移至<ul>才能使+（相邻的兄弟选择器）工作。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如果您想选择所有下一个兄弟姐妹，可以使用~（一般兄弟选择器）。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

参考：Adjacent sibling selectors - General sibling selectors

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>

相关：What does the + mean in CSS?

Answer 3

删除可见性：可见和可见性：隐藏;不需要

.servicesfindesc {
    opacity: 0;

}
.servicesfin:hover  {
   opacity: 1;
}