javascript - 将鼠标悬停在特定列表元素上时显示文本

Question

我面临的挑战是如何将鼠标悬停在 V 形上以显示包含其他信息的文本框。我在网上进行了广泛的搜索，但是我所做的每一次尝试都没有成功。

$('#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 标签是一种“hack”，最好使用 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 完成，如果你能够修改布局/标记的话。