:hover 鼠标悬浮时(基本导航)

:hover 设置元素在其鼠标悬停时的样式。

　　也就是鼠标箭头悬浮在该位置上,引发样式变化.当鼠标移开后,样式复原.

而你的网页中如果还存在这些伪类选择器,就必须按照以下顺序去书写.(毕竟是人家造就出的问题,也只能按解有效的方法去解决)

a:link {}　　//设置超链接a在未被访问前的样式。(即a标签未曾点击时的样式,往往在点击过一次a标签后,这效果就必须重置游览器了)

a:visited {}　　//设置超链接a在其链接地址已被访问过时的样式。(即点击a标签后,所呈现的样式.)

a:hover {}　　//设置元素在其鼠标悬停时的样式。

a:active {}　　//设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。(按住的那个状态才会显现出的样式)

往往只有给<a>标签本身添加个样式,就能解决颜色不匹配的问题.

<style>a:link {　　...　　}
a:visited {　　...}
a:hover {　　...}
a:active {　　...}</style>

这是最简单的鼠标悬浮背景变色的例子,也是应用导航中最常见的例子.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>nav{　　//导航的一大整块width: 100%;background: #284f86;overflow: hidden;}.ju{　　//居中的子块width: 80%;margin: 0 auto;}.ju ul{　　//去li的点,放li里也行list-style-type: none;}.ju ul li{　　//将li浮动,横向排列.padding: 0 10px;float: left;overflow: hidden;　　//清除浮动,防止塌陷}.ju ul li a{　　//给a标签设置样式padding: 10px 20px; color: #fff;　　//如果这里不设置文字颜色,很可能会出现文字颜色异常问题display: block;　　//由于a标签不是块标签,所以就只能将其变成块标签text-decoration: none; //去下划线的}.ju ul li a:hover{    //这部分就是鼠标悬浮部分background: #fff;　　//背景颜色为白色,可以按网页色调修改color: #f00;　　　　//悬浮后的颜色变化border-radius: 5px;　　//圆角...总之就在这里添加效果}       </style>
</head>
<body><nav><div class="ju"><ul><li><a href="#">首页</a></li><li><a href="#">教科书</a></li><li><a href="#">工具书</a></li><li><a href="#">绘图书</a></li><li><a href="#">程序书</a></li></ul></div></nav>
</body>
</html>

转载于:https://www.cnblogs.com/yinwangyizhi/p/9070881.html

:hover 鼠标悬浮时(基本导航)相关推荐

layui使用tips_使用layer.tips实现鼠标悬浮时触发事件提示消息实现
代码: 你瞅啥!?过来试试! 方法一: function show(id) { layer.tips("左边么么哒", "#"+id+"", ...
html旋转墙壁效果,css3实现照片墙效果，鼠标悬浮时旋转放大并摆正
一张张照片散乱的撒在一起,鼠标悬浮时旋转放大并摆正,效果如下图(所有图片均来自网络),主要使用到的css3属性有:transition.transform(scale.rotateZ).box-sha ...
CSS实现鼠标悬浮时背景图片拉近且增加遮罩层效果
效果预览点击查看效果我们在浏览网站时会发现有一些图片在鼠标悬浮在上时会有放大拉近的效果. 想要实现这个效果有两种方法,第一种方法是控制背景图片,第二种方法是控制插入的图片,我们这里介绍第一 ...
css简单实现鼠标悬浮时图片向上浮动的效果
文章目录前言一.效果图二.使用步骤 1.HTML代码 2.CSS代码总结前言 css简单实现鼠标悬浮时图片向上浮动的效果一.效果图二.使用步骤 1.HTML代码代码如下(示例): &l ...
web自动化时，怎么定位鼠标悬浮时才出现的元素
web自动化时,怎么定位鼠标悬浮时才出现的元素如图所示, 想要定位"修改密码",必须先鼠标悬浮在头像位置,才能看到修改密码,然后按正常操作在F12里就没办法定位"修改 ...
el-table 鼠标悬浮时样式的修改
前言项目中表格做了一个功能当搜索时,将搜索出的行进行高亮显示.比如: 但是客户最近提了个问题,希望鼠标移入时高亮颜色不要变. 解决鼠标移入颜色改变是引入当鼠标移入时,tr上自动添加了一个hover ...
ZedGraph的曲线的LineItem对象的Tag属性存储信息进而在鼠标悬浮时进行显示
场景 Winform中设置ZedGraph鼠标悬浮显示距离最近曲线上的点的坐标值和X轴与Y轴的标题: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article ...
jquery鼠标移入文字提示_Jquery hover鼠标经过时弹出div动态提示语
一.效果图二.需求描述 1.鼠标经过table每一行时,弹出div动态提示语: 2.div弹出层的位置随鼠标位置的变化而变化: 3.鼠标离开table或获取的动态提示语为空时,div弹出层消失. 下 ...
hover 鼠标悬浮改变样式
当鼠标悬浮在元素上,通过hover改变字体或背景颜色等,移开鼠标又恢复实例: http://yayihouse.com/yayishuwu/chapter/2215
css 实现鼠标悬浮时等比放大图片,鼠标移出时还原图片
实现思想,将图片外层放一个隐形的div容器,图片小比div容器要小, div容器的大小要大于图片放大的尺寸,css 可要自行调整大小这样当图片放大时,就不会影响页面的其他元素,因为它只在隐形的div容 ...

:hover 鼠标悬浮时(基本导航)

:hover 鼠标悬浮时(基本导航)相关推荐

最新文章

热门文章