Question

我有这段代码

这是我脑海中的剧本

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

这是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>

我想更改此区域中的文字：“#ll p”，只要用户将鼠标悬停在锚标记上。

例如。当用户将鼠标悬停在内容为“HOME”的锚标签上时，JavaScript会通过if和else进行比较（我不知道是否有其他方式，但我打开任何建议）所以就是这样：如果#hmenu li一个值等于Home然后#ll p内容应该变成“你悬停工作锚”，剩下的就这样了。

Answer 1

怎么样

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

Answer 2

如果要添加文本然后返回原始文本，可以将值存储在数据标记中。看看这个样本：

http://jsfiddle.net/PjJfk/

Answer 3

添加到@alexg和@Jay：

听起来你想要title属性的功能，但标题文本不是弹出，而是转到预定义的框。

我建议使用title attr，因为如果禁用js，这仍然有用。然后我想你可以使用hover（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>

请参阅http://jsfiddle.net/heey3/

Javascript鼠标悬停功能

3 个答案: