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

<ulclass="floatleft servicesfin"><li><ahref=" ">Financial Advising</a></li></ul><divclass="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;
}

<ulclass="floatleft servicesfin"><li><ahref=" ">Financial Advising</a></li></ul><divclass="servicesfindesc"><p>Offshore Bank accounts, money laundering, hedge funds, tax evasion, investing.</p></div><divclass="servicesfindesc"><p>Offshore Bank accounts, money laundering, hedge funds, tax evasion, investing.</p></div><divclass="servicesfindesc"><p>Offshore Bank accounts, money laundering, hedge funds, tax evasion, investing.</p></div><divclass="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/

<ulclass="floatleft"><liclass="servicesfin"><ahref=" ">Financial Advising</a></li><divclass="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;
}