このようなナビゲーション効果を作成するにはどうすればよいでしょうか? ！アドバイスを求めてください！ _html/css_WEB-ITnose

このエフェクトの作り方を誰が教えてくれますか? ！

ディスカッションへの返信（解決策）

先生が、最も簡単なのはオーバーフローの非表示だと言っていたのを覚えています。 。 。次に、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 、そうでないと出てきません。

c9ccee2e6ea535a969eb3f532ad9fe89 *{ マージン:0px; パディング:0px;

.sBa{ 幅:180px; ボーダー:1px マージン:自動; 背景:#000;}

.sBa img{ border:0px;}
.sBa .title{ 位置:絶対; 左:0px; 幅:100%; カラー:#FFF ; フォントサイズ:14px; カラー:#999;}
.sBa .title div{ パディング左:10px; 行の高さ:19px; 表示: なし;}
.sBa:hover :95px; 高さ:35px; 背景:#fff;}
12eb6ad9259d5f15defb98f6efcdda60 >
ee7959cc8dd4be16ef633321c03dac32 dc6dce4a544fdca2df29d5ac0ea9906bテストを追加16b28748ea4df4d9c2150843fecfba68 /div> 36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e