How to get a hidden content to show over cursor using html, css, javascript?

2
votes

There are many words like this: test1 test2 test3 test4 test5 test6 test7 test8 test9 test10 test11 ...

Each word is associated with multiple example sentences. And I want them to be hidden before the cursor is over the word. Here's my code.

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

The problem is when the original line is more than one, the block of example sentences covers the words in the bottom line. I want them to go down so the example sentences don't cover them.

3
javascripthtmlcss
Can you create a fiddle for the problem?(when its not working) – Rino Raj
@RinoRaj there's already the fiddle that's not working. – Roko C. Buljan
Do you realize that with what you want to achieve you're actually about to create a really bad jumpy UI. One hovers over an item, the accordion opens (shows up) pushing down the sibling items... now if one wants to reach with the mouse that lower item BAM! total mess. – Roko C. Buljan
You mean if the test9 and test10 wrap to the next line,you do not want them to be covered? That is going to require some JS I believe. – epascarello
This can be done using jQuery. Check updated demo: Demo – Manish Parakhiya

3 Answers

0
votes

If you add a margin-top to the block of example sentences then it will go down

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

Updated fiddle link https://jsfiddle.net/umxf19vo/1/

0
votes

Here, i used a jquery mouseover function for this

$(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");        
    })
})

i don`t know if can make this with only css, but u can make with this way

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

0
votes

Since you're using the Javascript, HTML and CSS tags I'm assuming you don't mind using Javascript to solve the issue. The reason why your problem is happening is because you're using position: absolute on your <div>'s. This means that the position will be positioned in absolute terms relative to it's ancestor element.

What you could do instead is palce all the titles first and then all the lists and then use javasript to select the appropiate element to show/hide. Below you can find an example of how to do it with 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>