完全CSS实现鼠标移上出现层的效果（超简单）

看过许多鼠标事件，都很复杂，太多的文件和繁杂的代码,而且好多都是用js实现，加载速度很慢。

这几天一直在找一种简单的实现效果，完全 CSS编写的效果，现在找到了，非常的少。

这就是完全 CSS实现的层效果，真的很不错的，稍微美化一下就非常好了。

希望大家多提意见……

CSS

.demo ul{position:relative;padding:0;margin:0;font-size:12px;}

.demo ul li{visibility:hidden;position:absolute;top:5px;left:180px;width:300px;padding:6px;border:#dfdfdf 1px solid;}/*显示li的内容的定位*/

.demo ul:hover li,.demo ul a:hover li{visibility:visible;}/*鼠标经过ul时，显示li的内容*/

.demo ul li a{margin-right:10px;color:#333;}

.demo ul b a{color:#333;width:200px;display:block;height:25px;line-height:25px;background:#fefefe;border:#dfdfdf 1px solid;text-decoration:none;text-indent:10px;}

HTML

<div <ul><b><a href=”#”>网页梦想吧</a></b>

</ul>

</div>

完全CSS实现鼠标移上出现层的效果（超简单）相关推荐

转：纯CSS实现“鼠标移过显示层”效果
利用<a>标签的a:hover状态触发鼠标移过的动作,其中未触发状态显示为单个图片.兼容IE6/7/8以及FF/Chrome等主流浏览器.以下是图示及完整代码. 原文:http://www ...
css划上去变长,Css3如何实现鼠标移上变长特效？（图文+视频）
本篇文章主要给大家介绍用css3实现鼠标移入变长效果的方法. 在前端页面设计中,css的功能是异常强大的,只要运用好它,你能实现很多网站各种精彩的动态效果.那么在之前的文章中也给大家分享介绍了一些用c ...
CSS图片阴影+鼠标移上图片放大、变形
在做图片卡片列表的时候我们经常用到图片的呼吸灯效果,实现图片的阴影效果.放大.动态展示代码: li img { display: block; width: 140px; height: 140px ...
Vue 框架-02-事件：点击, 双击事件,鼠标移上事件
Vue 框架-02-事件:点击, 双击事件,鼠标移上事件 1.单击事件:v-on:click 源码 app2.js : //实例化 vue 对象 new Vue({//注意代码格式//el:eleme ...
鼠标悬浮鼠标移上移出事件时改变背景颜色
效果首先给一个 class="liStyle" <li class="liStyle" @mouseover="mouseover(index ...
js 隔行变色+鼠标移上换色+鼠标离开颜色恢复+鼠标点击弹出点击的是第几行是什么颜色
隔行变色: 先获取要操作的HTML标签 var oLis = document.querySelectorAll('li') 循环HTML标签 for (var i = 0; i < oLis. ...
html鼠标滑过导航条展开导航条,jquery css实现鼠标滑过导航菜单栏动画效果
对于导航栏的实现对于前端人员来说再简单不过了,但是如何让我们的导航看起来生动,给用户一种很高大上的感觉,却需要我们好好设计一下.今天我给大家带来的是我自己在项目中用到的一个例子,当我们鼠标滑过导航栏时 ...
html鼠标出现下划线,鼠标移上链接出现下划线
核心提示:有些网页的链接,原先没有下划线,你把鼠标指向链接处,才会出现下划线,鼠标移掉下划线就又没有了. 有些网页的链接,原先没有下划线,你把鼠标指向链接处,才会出现下划线,鼠标移掉下划线就又没有了. ...
个人练习-jq 鼠标移上移出查看图片（放大）提示
只做了个简单的效果,以后可以加上动画等效果,实际效果如下: html 代码: <div class="wrap"><ul class="img_list ...

完全CSS实现鼠标移上出现层的效果（超简单）

完全CSS实现鼠标移上出现层的效果（超简单）相关推荐

最新文章

热门文章