> 웹 프론트엔드 > HTML 튜토리얼 > 如何做导航的那种效果?!求教!_html/css_WEB-ITnose

如何做导航的那种效果?!求教!_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 12:22:00
원래의
1056명이 탐색했습니다.



谁可以告诉我怎么做出这种效果啊?!


回复讨论(解决方案)

我记得我们老师讲过最简单的就是溢出隐藏。。。然后用a:hover设置鼠标指上去显示。

<div  id="test">offset</div><div id="title">Hello World.</div>
로그인 후 복사

$(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;就出来了,我觉得这是最简单的方法,但是位置要加对,定位也要准,不然不会出来的。
   

  
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿