How to create that kind of navigation effect? ! Ask for advice! _html/css_WEB-ITnose

Who can tell me how to make this effect? !

Reply to discussion (solution)

I remember our teacher said that the simplest thing is overflow hiding. . . Then use a:hover to set the mouse pointer to display.

<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 ;}

The general idea is like this, you can adjust the details yourself, it’s a matter of positioning and hiding reality.

JavaScript                                                                                                                    It needs to be correct and the positioning needs to be accurate, otherwise it won't come out.

c9ccee2e6ea535a969eb3f532ad9fe89

*{ margin:0px; padding:0px;}
.sBa{ width:180px; height:130px; border:1px solid #000; position:relative; margin:auto; background:#000;}
.sBa img{ border:0px;}
.sBa .title{ position:absolute; top:95px; left:0px; height:35px; width:100%; background:rgba (255,255,255,0.6); color:#FFF; font-size:14px; color:#999;}
.sBa .title div{ padding-left:10px; height:16px; line-height:19px;display: none;}
.sBa:hover .title{top:95px; height:35px;background:rgba(255,0,54,0.6); color:#fff;}

7397addd32d9e7686e552195e21b211e 6c04bd5ca3fcae76e30b72ad730ca86d c9b4ed089e1b99801a8531dc3f753402
ee7959cc8dd4be16ef633321c03dac32
9e80a1cbb6fa0609753359a9577296d4
< ;div>add tests16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
5db79b134e9f6b82c0b36e0489ee08ed
16b28748ea4df4d9c2150843fecfba68 36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e