HTML在悬停时显示更多文本 [英] HTML show more text on hover

问题描述

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

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

推荐答案

您必须将类移至< ul> 才能使 + (相邻的兄弟选择器)正常工作.

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>

参考:相邻的同级选择器-常规兄弟选择器

这篇关于HTML在悬停时显示更多文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！