javascript - 如何使用 html、css、javascript 获取隐藏内容以显示在光标上？

Question

有很多这样的话: 测试1 测试2 测试3 测试4 测试5 测试6 测试7 测试8 测试9 测试10 测试11 ...

每个单词都与多个例句相关联。我希望在光标移到单词上之前隐藏它们。这是我的代码。

演示:https://jsfiddle.net/kyubyong/umxf19vo/

HTML:

<a><b>test1</b></a>
<div class="divs">
    <li>This is the first example</li>
    <li>This is the second example</li>
    <li>This is the third example</li>
</div>
<a><b>test2</b></a>
<div class="divs">
    <li>This is the first example</li>
    <li>This is the second example</li>
    <li>This is the third example</li>
</div>

CSS

a:hover
{
    background-color: lightgray;
}

.divs 
{
  display: none;
}

a:hover + .divs 
{
    display: block;
    position: absolute;
    background-color: lightgray;
    width: 100%;
    padding: 5px;
}

问题是当原始行不止一行时，例句 block 覆盖了底行的单词。我希望它们下降，这样例句就不会覆盖它们。

Answer 1

由于您使用的是 Javascript、HTML 和 CSS 标记，我假设您不介意使用 Javascript 来解决问题。你的问题发生的原因是因为你正在使用 position: absolute在你的 <div>的。这意味着该位置将以相对于其祖先元素的绝对方式定位。

您可以做的是先放置所有标题，然后放置所有列表，然后使用 javasript 选择要显示/隐藏的适当元素。您可以在下面找到如何使用 jQuery 执行此操作的示例。

$('div').hover(function() {
  $($(this).attr("target")).toggle();
}, function() {
  $($(this).attr("target")).toggle();
});

div {
  display: inline;
  background: lightgray;
}
div:hover {
  background: darkgray;
}
.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div target="#test">Test</div>
<div target="#animals">Animals</div>
<div target="#fruits">Fruits</div>
<div target="#vegetables">Vegetables</div>
<div target="#cars">Cars</div>
<div target="#countries">Countries</div>
<div target="#continents">Continents</div>
<div target="#sports">Sports</div>

<div id="test" class="hidden">
  <ul>
    <li>Test 1</li>
    <li>Test 2</li>
    <li>Test 3</li>
  </ul>
</div>
<div id="animals" class="hidden">
  <ul>
    <li>Lion</li>
    <li>Tiger</li>
    <li>Gazzele</li>
  </ul>
</div>
<div id="fruits" class="hidden">
  <ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Orange</li>
  </ul>
</div>
<div id="vegetables" class="hidden">
  <ul>
    <li>Potatoe</li>
    <li>Tomatoe</li>
    <li>Lettuce</li>
  </ul>
</div>
<div id="cars" class="hidden">
  <ul>
    <li>Ferrari</li>
    <li>Porsche</li>
    <li>Audi</li>
  </ul>
</div>
<div id="countries" class="hidden">
  <ul>
    <li>United States</li>
    <li>Canada</li>
    <li>Mexico</li>
  </ul>
</div>
<div id="continents" class="hidden">
  <ul>
    <li>America</li>
    <li>Europe</li>
    <li>Africa</li>
  </ul>
</div>
<div id="sports" class="hidden">
  <ul>
    <li>Tennis</li>
    <li>Football</li>
    <li>Basketball</li>
  </ul>
</div>