заставить текст появляться при наведении на определенный элемент списка

Question

Проблема, с которой я сталкиваюсь, состоит в том, чтобы при наведении курсора на шевроны открыть текстовое поле, содержащее дополнительную информацию. Я провел обширный поиск в Интернете, однако каждая попытка, которую я предпринял, не сработала.

$('#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');
})

Вот jsfiddle: https://jsfiddle.net/9aet4kfj/

Answer 1

У вас возникает множество проблем.

Вот работоспособное jsFiddle , которое работает.

1. У вас не было загружено jQuery. ПРИМЕЧАНИЕ: Даже после загрузки jQuery, ГДЕ вы помещаете этот скрипт, имеет значение, поскольку у вас его нет в функции document.ready, он все равно может завершиться ошибкой.
2. В вашем CSS было несколько ошибок. Например, display: relative недопустим - я изменил на display: block
3. Я переработал javascript, чтобы он был более семантически правильным. Использование тегов href и class является «хаком», лучше использовать теги data-.

Модифицированный скрипт выглядит следующим образом:

// 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');
  });
});

Для измененного HTML и CSS, см. JsFiddle выше.

Дополнительно - согласно моему комментарию выше -это можно сделать с помощью чистого CSS, если вы вообще можете изменить макет / разметку.