El desafío al que me enfrento es poner el cursor sobre los chevrones para revelar un cuadro de texto que contiene información adicional. He realizado una búsqueda exhaustiva en línea, sin embargo, todos los intentos que he hecho no han funcionado.

$('#breadcrumb li a').hover(function () {
    var a = $(this).attr('href').slice(1)
    $('.info div').removeClass('active');
    $('.info .' + a).addClass('active')
})

$('#breadcrumb li a').on('mouseleave', function () {
    $('.info div').removeClass('active');
})

Aquí está el jsfiddle: https://jsfiddle.net/9aet4kfj/

2
Fergus Youds 3 oct. 2019 a las 17:00

1 respuesta

La mejor respuesta

Tiene una variedad de problemas.

Aquí hay un jsFiddle ejecutable que funciona.

  1. No tenías jQuery cargado. NOTA: Incluso después de cargar jQuery, DONDE ponga este script es importante, ya que no lo tiene en una función document.ready, es probable que falle.
  2. Tuviste algunos errores en tu CSS. Por ejemplo, display: relative no es válido; lo modifiqué a display: block
  3. He refactorizado el javascript para que sea más semánticamente correcto. Usar las etiquetas href y class es un "truco", es mejor usar etiquetas data-.

El script modificado se ve así:

// no-conflict safe document-ready
jQuery(function($) {
  // switched to 'mouseover', using 'on' (from 'hover')
  $('#breadcrumb li a').on('mouseover', function() {
    // switched to using data attributes instead of href
    var id = $(this).data('toggle-id');
    $('.info div').removeClass('active');
    // switched to using data attributes instead of class
    $('.info [data-content-id="' + id + '"]').addClass('active')
  });

  $('#breadcrumb li a').on('mouseleave', function() {
    $('.info div').removeClass('active');
  });
});

Para el HTML y CSS modificado, consulte jsFiddle arriba.

Además, según mi comentario anterior, esto se podría hacer absolutamente con CSS puro, si puede modificar el diseño / marcado.

1
random_user_name 3 oct. 2019 a las 14:19