css - 如何删除链接，但保持其鼠标悬停效果？

Question

我的 Drupal 7 网站(由 Nice Menus 模块提供)上有一个弹出式菜单，当用户悬停它时会激活该菜单。默认情况下，我必须放弃父级的路径，但实际上我不希望父级链接到某个地方。我尝试了 Disable link using css 的答案，但这也会禁用悬停效果。

有没有办法从菜单的父项中删除链接，但保持其鼠标悬停效果？

这是相关代码:

<div id="block-nice-menus-2">
 <ul id="nice-menu-2">
  <li class="menu__item">
   <a class="menu__link menu__link" href="/mysite/">
    My Menu
   </a>
  </li>
 </ul>
</div>

---

编辑阅读后this comment ，我尝试添加

Drupal.behaviors.my_custom_behavior = {
  attach: function(context, settings) {

    $('#nice-menu-2 ' +
    'li > ' +
    'a:not(.MYSITE-processed)').attr('href', '#')
                                   .addClass('MYSITE-processed');

  }
};

到我的主题的 script.js 文件，但这不起作用。我做错什么了吗？我可以处理这个吗？

Answer 1

我之前不得不多次执行此技巧。我只是做了一点 javascript，比如:

$('MYLINKSELECTOR').click(function() {
    return false;
}).mouseover(function() {
    $(this).css('cursor', 'default');
}).attr('href', '#');

它将禁用目标 href 并设置默认光标但保持悬停效果。

编辑:我在 MYTHEME/js/scripts.js 中使用这个脚本并给你一个选择器的例子(我使用 Superfish，而不是 Nice Menu)，这是我的完整代码:

Drupal.behaviors.pweMegaMenu = {
attach: function(context, settings) {
  // Parents links shouldn't be clickabled
  $('#menu-695-2 > a, #menu-695-2 li#menu-884-2 > a, #menu-695-2 li#menu-866-2 > a').click(function() {
    return false;
  }).mouseover(function() {
    $(this).css('cursor', 'default');
  }).attr('href', '#');
}