html - vaya - Cómo hacer que el primer enlace de menú se vea como si estuviera suspendido hasta que pase otro enlace

link a seccion especifica de otra pagina

Question

Tengo un menú que cambia la imagen de fondo de los enlaces al pasar el mouse y también reemplaza para cada enlace una imagen central en el "marco" de ese menú. Lo que tengo que hacer es hacer que el primer enlace del menú se muestre como si estuviera suspendido todo el tiempo y también se muestra su imagen central, pero se debe apagar una vez que se pase el mouse sobre uno de los otros enlaces de menú. ¿Algunas ideas?

Answer 1

En general, no puedes controlar un elemento padre con solo CSS, así que tienes que hacer un truco:

Por ejemplo, si tiene un menú de varios niveles, puede retener el estilo aplicado a un elemento padre simplemente escribiendo algo como esto:

ul li:hover li
{
   ...
}

De esta forma, suponiendo que se pasa el mouse sobre un LI anidado, se aplicará el estilo también al padre uno, por ejemplo, el elemento principal de la lista en la barra principal.

Si no tiene un menú multinivel, puede declararlo en formato html y estilizarlo todo para que aparezca como enlaces de igual nivel, solo para alcanzar su objetivo ;-)

ACTUALIZAR DESPUÉS DE COMENTARIOS Aquí el código jquery:

jQuery( document ).ready(function() {

   $(''.home-gallery a'').hover(
     function() {
       $(''.mofet-link'').removeClass( "active" );
       $(''.mofet-link img'').removeClass( "active_img" );
     }, 
     function() 
     {
       $(''.mofet-link'').addClass( "active" );
       $(''.mofet-link img'').addClass( "active_img" );
     });
});

también debe modificar su CSS, agregando algunas reglas:

.active_img, .mofet-link:hover img {
    display: block !important;
    max-height: 250px !important;
    max-width: none;
    right: 220px;
    top: 20px;
}


.active, .mofet-link:hover {
    background-image: url("http://www.israelijewel.com/websites/mishne-torah/wp-content/themes/twentyfourteen-child/images/gallery/mofet-button.jpg");
    background-position: right 4px top 6px;
    background-repeat: no-repeat;
    margin-bottom: 0;
    margin-top: 0;
}

Y, para ejecutar jQuery correctamente, colóquelo en la sección HEAD de la página. Por ejemplo:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

Answer 2

La idea: ajustar todos los botones dentro de un nuevo div, cuando pasas el cursor sobre ese div, quita el estilo del primer botón A MENOS que estés colocando el primer botón, luego simplemente marca cada botón como desees al pasar el cursor

html:

<div class=''home_gallery''>
  <div id=''buttons''>
    <a class=''mofet-link'' href=''mofet''><img....></a>
    <!-- the rest of the a tags -->
  </div>
</div>

css:

.mofet-link {
  //set the state you want initially, like when the mose hover over it
}
#buttons:hover .mofet-link {
  //set the state as NOT hovered
}
.mofet-link:hover {
  //set the state as hovered
}

Ahora, el valor predeterminado sería el dado por la regla .mofet-link (hovered), cuando pasas el mouse sobre cualquier botón, el css será el que está en #buttons: hover .mofet-link (descubierto), a menos que seas al pasar el mouse por mofet-link, las reglas aplicadas serán .mofet-link: hover (hover)

Puedes jugar un poco con la orden o usar algo como:

.mofet-link:hover {
  background: your_background !important;
}

o escribe un selector más preciso si tienes algún otro CSS que anula lo que quieras con más prioridad.

Espero que ayude.