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

Question

有很多这样的词：test1test2test3test4test5test6test7test8test9test10test11。。。

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

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

问题是，当原始行不止一行时，例句块覆盖了底线中的单词。我想把它们写下来，这样例句就不会涵盖它们了。

Answer 1

这里，我使用了一个jQuery mouseover函数

$(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/

Answer 2

如果你在例句块上加了一个页边空白，那么它就会下降

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

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

Answer 3

既然您使用的是Javascript、超文本标记语言和CSS标记，我假设您不介意使用Javascript来解决这个问题。问题发生的原因是因为您在上使用了位置：绝对

相反，你可以做的是先处理所有的标题，然后处理所有的列表，然后使用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>