I'm doing a full-screen menu. I have a menu that when I hover over a link I show an extra descriptive text. The problem is that I'm doing it by css and when I do hover it makes me hover in all the elements of the menu and it shows me all the texts instead of just the one I do hover:
.homepage-link{
display: block;
position: relative;
color: #ffffff;
background: transparent;
border: none;
cursor: pointer;
font-family: 'Helvetica';
font-weight: 500;
font-style: normal;
font-size: 38px;
}
.homepage-link .homepage-link-tagline {
-moz-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
width: 100%; }
.homepage-link:hover .homepage-link-tagline {
opacity: 1; }
.homepage-page-wrapper {
height: 100%;
background: #212121;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 9000;
width: 100%;
margin-left: 0;
min-height: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0; }
.touch .homepage-page-wrapper {
display: none; }
.touch .homepage.landing .homepage-page-wrapper {
display: block; }
#homepage-page-overlay {
opacity: 1;
/* top: -100%;*/
width: 100%;
/* display: none;*/
position: fixed; }
#homepage-page-overlay .close-modal {
position: absolute;
top: 10px;
right: 10px;
color: #fff;
font-size: 2em; }
.homepage #homepage-page-overlay {
top: 0;
display: block; }
.homepage #homepage-page-overlay .close-modal {
display: none; }
.homepage #homepage-page-overlay .site-nav-search {
display: none; } <div id="homepage-page-overlay" class="page-wrapper homepage-page-wrapper">
<div class="homepage-link">
<a href="inicio.html" class="homepage-link homepage-link-ajax homepage-link--why-we-make">INICIO</a><span class="homepage-link-tagline" class="homepage-link homepage-link-ajax homepage-link--why-we-make">Mucho de nosotros</span>
<a href="empresa.html" class="homepage-link homepage-link-ajax homepage-link--why-we-make">EMPRESA</a><span class="homepage-link-tagline">Somos todos nosotros</span>
<a href="tienda.html" class="homepage-link homepage-link-ajax homepage-link--why-we-make">TIENDA</a><span class="homepage-link-tagline">Nuestros productos de tienda</span>
<a href="blog.html" class="homepage-link homepage-link-ajax homepage-link--why-we-make">BLOG</a><span class="homepage-link-tagline">Nuestras ideas mas listas</span>
<a href="contacto.html" class="homepage-link homepage-link-ajax homepage-link--why-we-make">CONTACTO</a><span class="homepage-link-tagline">Nuestra informacion</span>
</div>
</div> 
Does anyone know if I go well for css or should I do better by jquery?