Question

这里的第一篇帖子如果这不在正确的地方或者有任何问题请告诉我！

我正在使用bootstrap来创建SharePoint 2013页面的主页面。我有几个用于导航到不同页面的按钮。

我想添加一个悬停功能，以便当“悬停”文本框，图像等时出现，但点击后，用户将被带到预先确定的位置。

到目前为止，我正在使用：

<nav>
      <ul class="nav nav-justified">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="URL">Business Architecture</a></li>
        <li><a href="URL">Operations</a></li>
        <li><a href="URL">Chnage Management</a></li>
        <li><a href="URL">Assist</a></li>
        </ul>
    </nav>

请注意我还没有触及'Home'按钮，只有其他人。我也通过以下方式开启了悬停颜色：

<STYLE type=text/css>
A:link { COLOR: Grey/*The color of the link*/}
A:visited { COLOR: #Grey/*The color of the visited link*/}
A:hover { COLOR: Black /*The color of the mouseover or 'hover' link*/}
BODY { COLOR: #454545/*The color of all the other text within the body of the page*/}
</STYLE>

其余的主要是从bootstrap现有模板构建的，因为我还是新手，只是习惯了HTML / CSS。

感谢马特

Answer 1

您可以查看内置的 Popover JS 功能。有关所有可用选项，请参阅Bootstrap 3 Docs。请参阅工作示例代码段。

var originalLeave = $.fn.popover.Constructor.prototype.leave;
$.fn.popover.Constructor.prototype.leave = function(obj) {
  var self = obj instanceof this.constructor ? obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type);
  var container, timeout;

  originalLeave.call(this, obj);

  if (obj.currentTarget) {
    container = $(obj.currentTarget).siblings('.popover');
    timeout = self.timeout;
    container.one('mouseenter', function() {

      clearTimeout(timeout);

      container.one('mouseleave', function() {
        $.fn.popover.Constructor.prototype.leave.call(self, self);
      });
    });
  }
};


$('body').popover({
  selector: '[data-popover]',
  trigger: 'click hover',
  placement: 'auto',
  html: "true",
  delay: {
    show: 50,
    hide: 400
  }
});

body {
  color: #454545;
  /*The color of all the other text within the body of the page*/
}
a:link {
  color: grey;
  /*The color of the link*/
}
a:visited {
  color: grey;
  /*The color of the visited link*/
}
a:hover {
  color: black;
  /*The color of the mouseover or 'hover' link*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav>
  <ul class="nav nav-justified">
    <li class="active"><a href="#" data-popover="true" title="Home" data-content="<a href='http://example.com'>Home</a>">Home</a>
    </li>
    <li><a href="URL" data-popover="true" title="Business Architecture" data-content="<a href='http://example.com'>Business Architecture</a>">Business Architecture</a>
    </li>
    <li><a href="URL" data-popover="true" title="Operations" data-content="<a href='http://example.com'>Operations</a>">Operations</a>
    </li>
    <li><a href="URL" data-popover="true" title="Change Management" data-content="<a href='http://example.com'>Change Management</a>">Change Management</a>
    </li>
    <li><a href="URL" data-popover="true" title="Assist" data-content="<a href='http://example.com'>Assist</a>">Assist</a>
    </li>
  </ul>
</nav>

Bootstrap Hover弹出超链接按钮

1 个答案: