Bootstrap V3 dropdown的hover玩法

这里记录一下Bootstrap V3 中dropdown的玩法。
在Bootstrap V3的帮助文档中，导航条中的dropdown是这样的：点击一下，然后dropdown-menu出现。要是我想鼠标放在那，然后它就出现，应该怎么办呢？

一、思路：

让dropdown-menu(就是圈起来的地方)不显示，当鼠标在Dropdown这里悬停时，在将其显示出来。
这里因为Bootstrap样式的关系，这个dropdown-menu一开始就是收起来的。如果你是自己写的其他内容，你就可以全部写完后，将那个menu不显示(即设置menu的样式 display：none)，鼠标悬停后再让它显示出来( display：block)。

二、演示

代码

<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%>
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>navbar</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrapvalidator-master/dist/css/bootstrapValidator.min.css" /><!-- 如果要使用bootstrap.js 一定要确保jquery.js先引入 --><script src="${pageContext.request.contextPath}/js/jquery.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/bootstrapvalidator-master/dist/js/bootstrapValidator.js"></script></head><style>li.dropdown:hover>ul.dropdown-menu{display:block;   }</style><body><nav class="navbar navbar-inverse"><div class="container-fluid"><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">Brand</a></div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li><li><a href="#">Link</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li><li role="separator" class="divider"></li><li><a href="#">One more separated link</a></li></ul></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid -->
</nav></body></html>

效果

三、变形：

我想将鼠标放在Link这里，然后弹出下拉菜单。
此处思路是一样的，直接放代码

代码

<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%>
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>navbar</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrapvalidator-master/dist/css/bootstrapValidator.min.css" /><!-- 如果要使用bootstrap.js 一定要确保jquery.js先引入 --><script src="${pageContext.request.contextPath}/js/jquery.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/bootstrapvalidator-master/dist/js/bootstrapValidator.js"></script></head><style>p{color:black;
}li.dropdown:hover>ul.dropdown-menu{display:block;
}.link-dropdown:hover>ul.dropdown-menu{display:block;
}</style><body><nav class="navbar navbar-inverse"><div class="container-fluid"><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">Brand</a></div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active link-dropdown"><a href="#">Link <span class="sr-only">(current)</span></a><ul class="dropdown-menu"><p>HelloWorld! HelloWorld! HelloWorld! HelloWorld! HelloWorld! HelloWorld! HelloWorld!</p></ul></li><li><a href="#">Link</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li><li role="separator" class="divider"></li><li><a href="#">One more separated link</a></li></ul></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid -->
</nav></body></html>

效果

Bootstrap V3 dropdown的hover玩法相关推荐

Bootstrap中DropDown插件显示下拉列表，点击下拉列表区域，不会再自动关闭。
目标: Bootstrap中DropDown插件显示下拉列表,点击下拉列表区域,不会再自动关闭. 参考:http://v3.bootcss.com/javascript/#dropdowns / ...
虎记：强大的nth-child(n)伪类选择器玩法
写在前面的戏: 最近参加了度娘前端IFE的春季班,刷任务,百度真是有营销头脑,让咱们这帮未来的技术狂人为他到处打广告(我可不去哪),其中做的几个任务中有几个以前没有用到的东西, 也算是有些许收获(现在 ...
【腾讯云的1001种玩法】几种在腾讯云建立WordPress的方法（Linux）（二）
2019独角兽企业重金招聘Python工程师标准>>> 版权声明:本文由张宁原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/communi ...
光脚丫思考Vue3与实战：第05章计算属性和侦听器第03节计算属性的其他玩法
下面是本文的屏幕录像的在线视频: 温馨提示: 1.视频下载:线上视频被压缩处理,可以下载高清版本: 链接:https://pan.baidu.com/s/1h600_BRR9O2Lr87zVQNgEw ...
你不可能知道的骨架屏玩法！
〇前言这篇是作者在公司做了活动架构升级后,产出的主文的前导第二篇,考虑到本文相对独立,因此抽离出单独成文.姐妹兄弟篇,<你可能不知道的动态组件玩法????>. 可能文"对不起 ...
Bootstrap V3版本轮播（滚动幻灯片）插件使用
首页大屏滚动幻灯片是网站常用表现手法,尤其企业展示型网站使用最多,下面针对Bootstrap V3版本幻灯片调用做详细分解记录,以便后期查阅. 一.首先引用Bootstrap源码的CSS和JS与相关的 ...
[Linux] 红米2 安装 postmarketOS(基于 Alpine Linux)及后续玩法
本来笔者想买一个Armbian的斐讯N1盒子来运行一些docker容器,但是突然想到有一部闲置的红米2,于是乎便寻找方法看看能否将其刷入Linux解锁更多玩法. 红米2增强版拥有2G RAM和 16G ...
Go语言解决孔明棋的玩法(加深对for循环的认识)
对于for循环,在 Go语言零基础入门,捕获错误.slice切片.for循环.test 中也有介绍,大家都很熟悉,一般是三部分组成:初始化,条件表达式,后置语句,如下: func main() {fo ...
在Unity中构建Pong克隆：UI和游戏玩法
In Part 1 of this tutorial – the Retro Revolution: Building a Pong Clone in Unity – we created a Pon ...

Bootstrap V3 dropdown的hover玩法

一、思路：

二、演示

代码

效果

三、变形：

代码

效果

Bootstrap V3 dropdown的hover玩法相关推荐

最新文章

热门文章