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

我所面临的挑战是，将鼠标悬停在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:

您遇到了各种各样的问题

这是一个有效的runnable

您没有加载jQuery。注意：即使在加载jQuery之后，这个脚本放在什么地方也很重要，因为在

文档中没有它。ready

函数，它仍然可能失败

您的CSS中有一些错误。例如，

display:relative

无效-我已修改为

display:block

我对javascript进行了重构，使其在语义上更加正确。使用href和class标记是一种“黑客行为”，最好使用

数据-

标记 修改后的脚本如下所示：

// 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，请参见上面的JSFIDLE

---

此外，根据我上面的评论，如果您能够修改布局/标记，这完全可以用纯CSS完成。

作为旁注：这不需要javascript。这完全可以通过CSS和一些相邻的同级选择器来实现，假设您能够稍微修改标记……您可以使用

上的“title”属性，这将在悬停时生成工具提示。够了吗？非常感谢你的帮助。我知道这在纯CSS中是可能的，但是我非常确定这涉及到使用psuedo元素，我已经使用这两种元素来提供V形形状。实际上CSS解决方案根本不需要伪元素：）