I am making a full screen menu.
I have a menu that, when I hover over a link, shows some extra descriptive text. The problem is that I'm doing it via CSS, and when I hover , it hovers over all the menu items and shows me all the texts, instead of just the one I hover over :
.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'm doing well for CSS or if I should do better for jQuery?
Hi, to solve this problem so that all the spans appear when hovering, you just have to enclose the label "a" and the "span" inside a span or something similar. and in the css replace
".homepage-link:hover .homepage-link-tagline" to ".homepage-link span:hover .homepage-link-tagline". With this (span:hover ) only the desired one is activated.