2012-04-07 27 views
1

は、私はこのコードJavaScriptのマウスオーバー機能

を持ってこれはこれは私がこのエリア内のテキストを変更したいHTMLの一部

<div id="headd"> 
<img src="logoname.png"/> 
</div> 
<div id="ll"> 
<p>My home, the front page and the main page</p> 
</div> 
<img id="da" src="logo.png" /> 
<div id="line"> 
    <img src="rr.gif" /> 
</div> 
<ul id="hmenu"> 
    <li><a class="active" href="#">HOME</a></li> 
    <li><a href="#">WORK</a></li> 
    <li><a href="#">PORTFOLIO</a></li> 
    <li><a href="#">ABOUT</a></li> 
    <li><a href="#">CONTACT</a></li> 
</ul> 

である私の頭の中で

<script src="jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
$("#hmenu li a").hover(
    function() { 
    if ($("#hmenu li a").val == "Work") 
    { 
     alert ('halla') 
    } 

    }, 
    function() { 
     $(this).removeClass("active"); 
    } 
    ); 
    }); 
</script> 

スクリプトです。ユーザーがアンカータグにカーソルを置くたびに "#ll p"が表示されます。

たとえば、ユーザーが "HOME"のコンテンツを持つアンカータグにカーソルを合わせると、JavaScriptはifとelseで比較します(別の方法があるかどうかはわかりませんが、私は任意の提案に公開しています)。 #hmenu liの値がHomeと等しい場合は、#ll pの内容が「あなたが仕事のアンカーをホバリングする」ように変更する必要があります。あなたがテキストを追加して、元のテキストに戻したい場合は

+1

メニュー項目にクラス/ IDを追加します。これははるかに簡単になります。 – Blender

答えて

0

は@alexgする追加と@Jay:

あなたがtitle属性の機能が必要なようですが聞こえるが、代わりにポップアップで、タイトルテキストがAに行きます予め定義されたボックス。

title attrを使用することをお勧めします。これは、jsが無効な場合でも機能します。 その後、私はあなたのようなホバー(のMouseEnter/mouseleave)アクション使用することができたとします

のMouseEnter:リンクからタイトルを削除するが、「#ll P」 mouseleaveの内容のためにそれを使用する:リンクにオリジナルのタイトルを復元そして#ll p

の元の内容は、私は本当にjQueryの男ではないんだけど、何かのように:

$(function() { 
var text, title; 
$('#hmenu li a').hover(
    function() { 
    var $p = $('#ll p'), $a = $(this); 
    text = $p.text(); 
    title = $a.attr('title'); 
    $a.attr('title',''); 
    $p.text(title); 
    }, 
    function() { 
    $('#ll p').text(text); 
    $(this).attr('title', title); 
    } 
) 
}); 

#hmenuは

<ul id="hmenu"> 
    <li><a class="active" href="#" title="My home, the front page and the main page">HOME</a></li> 
    <li><a href="#" title="Glad I'm not there now">WORK</a></li> 
    <li><a href="#" title="You really have to see this">PORTFOLIO</a></li> 
    <li><a href="#" title="I'm interesting once you get to know me">ABOUT</a></li> 
    <li><a href="#" title="Shazam">CONTACT</a></li> 
</ul> 
になります10

http://jsfiddle.net/heey3/

1

どの程度

$('#hmenu li').hover(function() { 
    $('#ll p').text('you hover the '+$(this).text()+' anchor'); 
} 
1

、あなたはデータタグであなたの値を格納することができます。このサンプルを見てください:

http://jsfiddle.net/PjJfk/