HTML Show More Text On Hover

First of all, I know this question was already asked and answered here: CSS on hover show content But for some reason, it simply ISN'T working for me! So frustrating... I'll try an

Solution 1:

You have to move class to <ul> to make + (adjacent sibling selector) work.

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

If you want to select all next siblings you could use ~ (general sibling selector).

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

Reference: Adjacent sibling selectors - General sibling selectors

Solution 2:

This is because you are using the + selector in CSS which indicates an adjacent element in the HTML. If you move the DIV alongside your LI then it will work, although it's not proper HTML, I just want to show you since you are using the +.

Like so: 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>

Related: What does the + mean in CSS?

Solution 3:

Remove visibility: visible and visibility: hidden; dont need

.servicesfindesc {
    opacity: 0;

}
.servicesfin:hover  {
   opacity: 1;
}