JSFiddle - React, Tailwind, and code Playground

by Margus Martsepp

HTML

<div class="selector">
    <a href="http://www.sekretar.ee/syndmused">Sündmused</a>
    <div class="overlay">
        <div>
          <h3>Aktuaalsed sündmused</h3>
          <ul>
              <li><a href="http://www.sekretar.ee/article/2014/6/13/ettevotete-suvepaevadest-votab-osa-60-70-tootajatest">Suvepäevad suurendavad töötajate ühtekuuluvustunnet (1)</a></li>
              <li><a href="http://www.sekretar.ee/Default.aspx?PublicationId=25c63430-ac00-4592-b0cb-2e33268e2a55">Kuidas mõõta sündmusturunduse tulemuslikkust?</a></li>
              <li><a href="http://www.sekretar.ee/article/2014/4/24/fotod-meeleolukas-sekretaride-paeva-konverents">FOTOD: meeleolukas Sekretäride päeva konverents</a></li>
          </ul>
        </div>
                <div>
          <h3>Toimunud sündmused</h3>
          <ul>
              <li><a href="http://www.sekretar.ee/Default.aspx?PublicationId=8ab90834-1b25-4486-820a-8274aae52852">Kokkuhoid cateringi pealt võitu ei too</a></li>
              <li><a href="http://www.sekretar.ee/Default.aspx?PublicationId=9f48fd09-b6ba-4f5b-8a38-9251f8c9ce0f">Milliseid tegevusi pakkuda lastele firmapeol?</a></li>
              <li><a href="http://www.sekretar.ee/Default.aspx?PublicationId=5d5651ff-862d-4a82-871c-dc2a0f9d14b7">Eesti parim sekretär selgub 23.aprillil     </a></li>
                            <li><a href="http://www.sekretar.ee/blog/2014/3/20/kuidas-koostada-kutset">Kuidas koostada kutset?</a></li>
                            <li><a href="http://www.sekretar.ee/Default.aspx?PublicationId=99623e91-5d5e-4b11-a36f-91f0f2f5fc0a">Mida teha naistepäeval?</a></li>
          </ul>
        </div>
    </div>
</div>

CSS

body {
    font-size: 14px;
    font-family: Consolas,"courier new";
}
a {
    text-decoration:none;
}
a:hover {
    text-decoration: underline;
}
a:hover .bar {
    display:inline-block;
}
div.overlay
{
    display:none;
}

JavaScript

$(function(){
    $(".selector").hover(
        function(){
            $(this).find(".overlay").fadeIn();
        },
        function(){
            $(this).find(".overlay").fadeOut();
        }
    );        
});