HTML show more text on hover

Question

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 and keep it brief.

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

`+` I don't think will get to `.servicesfindesc` because it is inside the `ul` — Simply Craig, Dec 08 '14 at 20:42
And by the way, could I change some of these classes to ID's and the selectors/siblings would still work just fine? — Willman, Dec 08 '14 at 21:07
Yes, you can interchange classes and IDs all you want. `.servicesfin:hover + .servicesfindesc` is the same as `#servicesfin:hover + #servicesfindesc` or `.servicesfin:hover + #servicesfindesc`. HOWEVER, IDs are for UNIQUE items, do not confuse that. If you need to use it more than once, use a class. — Simply Craig, Dec 08 '14 at 21:08

emmanuel · Accepted Answer · 2014-12-08T21:00:29.687

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

So instead of using ul's I could just turn the li's into div's and style them the same as li's so everything would share a common parent? — Willman, Dec 08 '14 at 21:03
But that wouldn't be ideal for accessibility... But you're saying I should do `

score 2 · Answer 2 · edited May 23 '17 at 12:12

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?

edited May 23 '17 at 12:12

Community

1
1

answered Dec 08 '14 at 20:43

Scott

3,736
2
26
44

1

This won't quite work for my situation I don't think. I have other li's split into 2 columns on the page, with the "servicesfindesc" appearing in the middle between them. – Willman Dec 08 '14 at 20:47
Then you are forced to use javascript to change the visibility of other sections of the HTML that can't be selected solely via CSS. You can add a JS mouseover/mouseout function which shows/hides the other HTML. – Scott Dec 08 '14 at 20:57
1

Alright, well I don't need to stick with using +, that's just what I saw used on the other page I referenced. I guess I need to read up on css siblings... Thanks for the link! – Willman Dec 08 '14 at 20:57
1

Here is an example that uses JS to control the visibility of the other HTML: http://jsfiddle.net/scottcanoni/tsyndeuj/ – Scott Dec 08 '14 at 21:00

score -2 · Answer 3 · answered Dec 08 '14 at 20:41

-2

Remove visibility: visible and visibility: hidden; dont need

.servicesfindesc {
    opacity: 0;

}
.servicesfin:hover  {
   opacity: 1;
}

answered Dec 08 '14 at 20:41

Luis

535
2
14

I was going to use the display: block / display: none, but I was told that's not good practice for SEO. Does visibility/opacity still show text for search engines? – Willman Dec 08 '14 at 20:46
1

This doesn't work, or at least doesn't solve the issue – DerStrom8 Dec 08 '14 at 20:48

HTML show more text on hover

3 Answers3

Linked