如何使用 html、css、javascript 让隐藏的内容显示在光标上？答案

【问题标题】：How to get a hidden content to show over cursor using html, css, javascript?如何使用 html、css、javascript 让隐藏的内容显示在光标上？
【发布时间】：2015-10-03 22:53:13
【问题描述】：

有很多这样的词： test1 test2 test3 test4 test5 test6 test7 test8 test9 test10 test11 ...

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

演示：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;
}

问题是当原行不止一个时，例句块覆盖了底行的单词。我希望他们下去，这样例句就不会涵盖他们。

【问题讨论】：

你能解决这个问题吗？（当它不工作时）
@RinoRaj 已经有小提琴不工作了。
您是否意识到，您想要实现的目标实际上是要创建一个非常糟糕的跳跃式 UI。将鼠标悬停在一个项目上，手风琴打开（显示）向下推同级项目......现在如果你想用鼠标到达较低项目 BAM！一团糟。
您的意思是如果 test9 和 test10 换行到下一行，您不希望它们被覆盖？我相信这需要一些 JS。
这可以使用 jQuery 来完成。查看更新的演示：Demo

标签： javascript html css

【解决方案1】：

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

您可以做的是先放置所有标题，然后放置所有列表，然后使用 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>

【讨论】：

【解决方案2】：

如果您在示例句子块中添加一个margin-top，那么它将下降

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

更新小提琴链接https://jsfiddle.net/umxf19vo/1/

【讨论】：

是的，什么在这里不起作用？它没有出现在光标上？

【解决方案3】：

在这里，我为此使用了 jquery 鼠标悬停功能

$(document).ready(function(){
    $(".test").mouseover(function(){
        if($(".test").find(".divs").hasClass("divs-hover")){
            $(".test").find(".divs").removeClass("divs-hover"); 
            $(".test").find("a").css("background-color","transparent");
        }
        $(this).find(".divs").addClass("divs-hover");
        $(this).find("a").css("background-color","lightgray");
    })
    $(".test").mouseleave(function(){
            $(".test").find(".divs").removeClass("divs-hover");    
            $(".test").find("a").css("background-color","transparent");        
    })
})

我不知道是否可以只用 css 制作，但你可以用这种方式制作

https://jsfiddle.net/umxf19vo/14/

【讨论】：