0

ツール ヒントがある固定メニューを実行しています。項目の上にマウス カーソルを合わせると、fadeIn() を実行しているイメージが表示されるはずですが、動作が非常に奇妙で、最初に表示されてからフェードインします。これが何が起こっているのかわからないので、誰かが私に何が起こっているのかを説明し、私を助けてくれるかどうかを確認するためにコードを残してください.

HTML

<div id="nav-pPal">
  <ul class="nav-Ppal">
    <li>
      <div class="tooltip"></div>
      <a class="btns-nav" id="0" href="#block-intro">01</a>
    </li>
    <li>
      <div class="tooltip"></div>
      <a class="btns-nav" id="1" href="#block-pq-zolfunza">02</a> 
    </li>
    <li>
      <div class="tooltip"></div>
      <a class="btns-nav" id="2" href="#block-modulos-zolfunza">03</a>    
    </li>
    <li>
      <div class="tooltip"></div>
      <a class="btns-nav" id="3" href="#block-seguridad">04</a>
    </li>
    <li>
      <div class="tooltip"></div>
      <a class="btns-nav" id="4" href="#block-desarrollo">05</a>
    </li>
    <li>
      <div class="tooltip"></div>
      <a class="btns-nav" id="5" href="#block-nuestra-ubic">06</a>
    </li>
    <li>
      <div class="tooltip"></div>
      <a class="btns-nav" id="6" href="#block-noticias">07</a>
    </li>
    <li>
      <div class="tooltip"></div>
      <a class="btns-nav" id="7" href="#block-preguntas">08</a>
    </li>
    <li>
      <div class="tooltip"></div>
      <a class="btns-nav" id="8" href="#block-contacto">09</a>
    </li>
  </ul>
</div>

これはCSSです

#nav-pPal {
width:30px;
height:auto;
position:fixed;
right:0;
top:30%;
z-index:5;
}

.nav-Ppal li a {
width: 30px;
height: 22px;
padding-top:8px;
text-align:center;
display:block;
text-decoration:none;
color:#FFF;
cursor:pointer;
background-color: #000;
color: #FFF;
opacity: 1;
-moz-opacity: 0.70;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=70);
cursor:pointer;
font-family: 'lucida_sans_unicoderegular', Helvetica, Arial, sans-serif;
font-size:11px;
}



.tooltip{
background: black;
display: none;
height: 140px;
position: absolute;
right: 32px;
width: 200px;
transition: all .2s ease;
}

FINNALLY THE JQUERY //------------ ツール ヒント メイン メニュー ------------

$(".btns-nav").on("mouseover", displayPreview);

function displayPreview(){
    $(this).prev().fadeIn("slow");
    console.log(this);
}

$(".btns-nav").on("mouseleave", hiePreview);

function hidePreview(){
    $(this).prev().fadeOut("slow");
4

2 に答える 2

2

この CSS 行を削除します。

transition: all .2s ease;

作業フィドル: http://jsfiddle.net/ZTSe4/7/

于 2013-04-09T16:01:56.823 に答える
0

他のすべてのツールチップを非表示にしてから、ホバーされたツールチップを表示します:

$(".tooltip").hide();
$(this).prev().fadeIn("slow");

http://jsfiddle.net/gRPnP/1/

于 2013-04-09T16:10:50.760 に答える