如何做导航的那种效果?!求教!_html/css_WEB-ITnose
程序员文章站
2022-05-05 20:48:44
...
谁可以告诉我怎么做出这种效果啊?!
大体思想就是这样,细节你自己调吧,就是定位和现实隐藏问题。
回复讨论(解决方案)
我记得我们老师讲过最简单的就是溢出隐藏。。。然后用a:hover设置鼠标指上去显示。
offsetHello World.
$(function() {$("#test").bind({"mouseenter": function(e) { $("#title").css("left",e.pageX).css("top",e.pageY).show();},"mouseout": function(e) { $("#title").hide();}});});
#title { width:100px; height:100px; display:none; position:absolute; background-color:red; }#test { position:absolute; text-align:center; left:20%; top:20%; right:50%; bottom:50%; background-color:gray; border: 1px solid ;}
大体思想就是这样,细节你自己调吧,就是定位和现实隐藏问题。
JavaScript
display:none隐藏,想显示的时候,加个伪类:hover,然后display:block;就出来了,我觉得这是最简单的方法,但是位置要加对,定位也要准,不然不会出来的。
推荐阅读
-
如何做出图中的效果?(块级元素浮动对齐)_html/css_WEB-ITnose
-
求教,有这么一个效果,当把鼠标放上去二维码慢慢的出来,鼠标离开二维码慢慢的下去,怎么去实现。_html/css_WEB-ITnose
-
通过html和css做出下拉导航栏的效果_html/css_WEB-ITnose
-
网站上那种带特殊效果的热门标签怎么制作_html/css_WEB-ITnose
-
谷歌Chrome浏览器 兼容background-attachment:fixed;吗?如何做到火狐背景图片固定的效果_html/css_WEB-ITnose
-
关于导航效果的设置,涉及同一个页面中有两个列表的情形,求教!_html/css_WEB-ITnose
-
通过html和css做出下拉导航栏的效果_html/css_WEB-ITnose
-
求教分栏,div+css,不是frame框架的那种_html/css_WEB-ITnose
-
求教,有这么一个效果,当把鼠标放上去二维码慢慢的出来,鼠标离开二维码慢慢的下去,怎么去实现。_html/css_WEB-ITnose
-
求教分栏,div+css,不是frame框架的那种_html/css_WEB-ITnose