Jquery：当悬停在菜单项上时，显示文本

Posted

技术标签:

【中文标题】Jquery：当悬停在菜单项上时，显示文本【英文标题】：Jquery: When Hover on Menu Item, Display Text 【发布时间】：2010-11-19 14:22:22 【问题描述】：

我是 JQuery 新手，但希望在我正在构建的网站中使用它。

当用户将鼠标悬停在具有 li 类 hovertriggerssubhead 的菜单项上时，我想在其下方显示一些文本，位于 id 为 @987654323 的 div 中（嵌套在 li 中） @。我已经看过几个这样的例子，即在 JQuery 文档的 FAQ 中的食谱和 JQuery 站点本身的代码中。

这是我的 html 代码：

<div id="Navigation">
<ul>

<li class="current">
<a href="index.html">Home</a></li>

<li class="hovertriggerssubhead">
<a href="gallery.html">Gallery</a>

<div class="NavSubhead">
<p class="navsubheadtext">Under Construction</p>
</div> 
</li>

<li class="hovertriggerssubhead">

<div class="NavSubhead">
<p class="navsubheadtext">Under Construction</p>
</div> 
<a href="contact.html">Contact</a></li>

</ul>
</div>

我在我的 JQuery 代码中尝试了两种方法来实现这一点；它们在下面：

$(document).ready(function() 

//first method
$(".NavSubhead").hide();

$('#Navigation li').hover(
            function()$(this).find('div.NavSubhead:hidden').fadeIn(500);,
            function()$(this).find('div.NavSubhead:visible').fadeOut(500);
        );


//second method 
    $("#Navigation li div").hide(); 

    $("#Navigation li.hovertriggerssubhead").hover(
        function () 
        $(this).children("div.NavSubhead").show();
        ,function()
        $(this).children("div.NavSubhead").hide();
    );//hover

);// document ready

任何帮助将不胜感激。谢谢！

更新：我尝试了很多答案，甚至有一个带有工作演示的答案，但它仍然不起作用，这很奇怪。由于包含表，它是否可能与导航 html 的约束有关？表格具有固定宽度。除此之外，我不知道是什么问题，并且正确引用了 JQuery。提前致谢！

更新 #2：由于我的 HTML 存在一些奇怪的限制，这可能无法正常工作，因此我将在此处发布。正如你在下面看到的，我也在使用this Slideshow 框架。

<html>
<head>
<title>MZ Photography</title>

<!-- Jquery Stuff -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">

/*

$(function() 

  $("div.NavSubhead").hide();

 $('#Navigation li a').hover(
    function()$(this).next().stop(false, true).slideDown().fadeIn(500);,
    function()$(this).next().stop(false, true).slideUp().fadeOut(500);
  );

);
*/



$(function() 

/* hacky nav highlighting */
var loc = window.location.href;
//strip the existing current state
$('#Navigation .current').removeClass('current');

//add class to current section...
//Home
if(loc.indexOf('MZPhotography.html') > -1)
       $('#Navigation #home').addClass('current');

//Gallery
else if(loc.indexOf('gallery') > -1)
       $('#Navigation #gallery').addClass('current');

//Contact
else if(loc.indexOf('contact.html') > -1)
       $('#Navigation #contact').addClass('current');




);

$(document).ready(function() 



  $("div.NavSubhead").hide();

  $('#Navigation li a').hover(
    function()$(this).next().stop(false, true).slideDown().fadeIn(500);,
    function()$(this).next().stop(false, true).slideUp().fadeOut(500);
  ); 







);


</script>


<!-- End jquery stuff -->


<!-- Slideshow stuff begins here -->


<link rel="stylesheet" type="text/css" href="css/slideshow.css" media="screen" />
    <script type="text/javascript" src="js/mootools.js"></script>
    <script type="text/javascript" src="js/slideshow.js"></script>
    <script type="text/javascript">     
    //<![CDATA[
      window.addEvent('domready', function()
        var data = 
          '30.jpg':  caption: '' , 
          '25.jpg':  caption: '' , 
          '21.jpg':  caption: '' , 
          '16.jpg':  caption: '' ,
          '11.jpg':  caption: '' ,
          '13.jpg':  caption: '' ,
          '12.jpg':  caption: '' ,
          '9.jpg':  caption: '' ,
          '4.jpg':  caption: '' ,
          '2.jpg':  caption: '' ,
          '3.jpg':  caption: '' ,
          '6.jpg':  caption: '' ,
          '7.jpg':  caption: '' ,
          '14.jpg':  caption: '' ,
          '8.jpg':  caption: '' ,
          '10.jpg':  caption: '' ,
          '15.jpg':  caption: '' ,
          '17.jpg':  caption: '' ,
          '22.jpg':  caption: '' ,
          '28.jpg':  caption: '' ,
          '26.jpg':  caption: '' ,
          '27.jpg':  caption: '' ,
          '24.jpg':  caption: '' ,
          '23.jpg':  caption: '' ,
          '19.jpg':  caption: '' ,
          '18.jpg':  caption: '' ,
          '20.jpg':  caption: '' ,
          '29.jpg':  caption: '' ,
          '31.jpg':  caption: '' ,
          '32.jpg':  caption: '' ,
          '1.jpg':  caption: '' ,
          '5.jpg':  caption: '' ,
          '33.jpg':  caption: '' ,
          '34.jpg':  caption: '' ,
          '35.jpg':  caption: '' ,
          '36.jpg':  caption: '' 



        ;
        var myShow = new Slideshow('show', data, controller: true, height: 450, hu: 'images/', thumbnails: false, width: 600);
      );
    //]]>
    </script>


    <!-- end Slideshow -->

<link rel="stylesheet" href="site.css">

</head>
<body>

<table > <!--980 -->

<tr>

<td >

<table > <!--880-->

<tr>

<td align="left">
<div id="logo">
<img src="images/title.png" />
</div>
</td>

<td align="right"><!--MENU-->
<div id="Navigation">
<ul>

<li id="home" class="current">
<a href="#top">Home</a></li>

<li id="gallery" class="hovertriggerssubhead">
<a href="gallery.html">Gallery</a>

<div class="NavSubhead">
<p class="navsubheadtext">Under Construction</p>
</div> 
</li>

<li id="contact" class="hovertriggerssubhead">
<a href="contact.html">Contact</a></li>

<div class="NavSubhead">
<p class="navsubheadtext">Under Construction</p>
</div> 

</ul>
</div>
</td>
</tr>
</table>

<table >
<tr><td><br></td></tr>
<tr>
<!-- we don't rly need this -->
<!-- How about about section here? -->

<td align="left" id="tdAbout">

<!--Recent Changes --> <!-- NM -->
<div id="aboutDiv">
<p class="yellowboxtransparent" id="about">
Welcome to MZ's personal photography site. Here, you will find galleries of some of his photos, by pressing the Galleries link at the top right hand side of the page. Enjoy!

</p>
</div>

<!-- About --> </td>
<td>&nbsp;&nbsp;</td>
<td align="center">

<!--Slideshow-->
<div align="center" id="show" class="slideshow">
    <img src="images/1.jpg"  />
  </div>

</td>
<td align="right">
</td>
</tr>

<tr><td><br><br></td></tr>

<tr><!--<td align="left"> -->

<!--Copyright Statement-->
<!--<p class="copy">&copy; Copyright 2009 by MZ. <br/>All Rights Reserved. </p>

</td><td align="right"><!--Links--><!--</td>--></tr></table>
</td>
<td><!--Right hand column -->
<div id="meDiv">
<p class="blueboxtransparent">

hi

</p>
</div>
</td>
</tr>
</table>
<br/><br/><br/><br/><br/>
<!-- Beneath -->

<div id="bottom">

<div class="leftfloat" id="divCopy">
<!--Copyright Statement-->
<p class="copy">&copy; Copyright 2009 by MZ. All Rights Reserved. </p>
</div>
<div class="rightfloat" id="divLinks">

<ul id="linklist">
<li><a href="http://absolutely2nothing.wordpress.com">Blog</a></li>
<li><a href="http://twitter.com/maximz2005">Twitter - @maximz2005</a></li>

</ul>


</div>


</div>
</body>
</html>

下面是我的css，在site.css中。

/* CSS for MZ Photography site. Coypright 2009 by MZ, All Rights Reserved. */

p.copy  color:#ffffff; font-face:Helvetica,Calibri,Arial; font-size:12; font-style:italic;

.leftfloat  float: left; 

.rightfloat  float: right; 

body 
font: 12px/1.5 Helvetica, Arial, "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif!important;
color: #ffffff;
background: #000000; 

#about  color: #3399FF;  /* #666 */

h1  font: Helvetica, "Comic Sans MS", "Arial Rounded MT Bold", Tahoma, "Times New Roman"; font-size: 32pt; color: #339; 

h2  font: Helvetica, Arial; font-size: 18pt; color: #666; 

a.hover  background-color:#666; color:#ffffff; 

#tdAbout  width:25 

#nav  float:right 

#linklist

font-family: Calibri, Helvetica, Comic Sans MS, Arial, sans-serif;
list-style-type:circle;
white-space:nowrap;


#linklist li

display:inline





/* Warnings/Alerts */
.warning, .alert, .yellowbox 
padding: 6px 9px;
background: #fffbbc;
border: 1px solid #E6DB55;


.yellowboxtransparent, .warningtransparent, .alerttransparent  
padding:6px 9px;
border: 1px solid #E6DB55;


/* Errors */
.error, .redbox 
padding: 6px 9px;
background: #ffebe8;
border: 1px solid #C00;


.redboxtransparent, .errortransparent
padding: 6px 9px;
border: 1px solid #C00;


/* Downloads */
.download, .greenbox 
padding: 6px 9px;
background: #e7f7d3;
border: 1px solid #6c3;


.greenboxtransparent, .downloadtransparent 
padding: 6px 9px;
border: 1px solid #6c3;


/*Info Box */
.bluebox, .info
padding: 6px 9px;
background: #FFFF33;
border: 2px solid #3399FF;
color: 000000;


.blueboxtransparent, .infotransparent
padding: 6px 9px;
border: 1px solid #3399FF;


a:link 
COLOR: #DC143C; /* #0000FF */

a:visited 
COLOR: #DC143C; /* #800080 */

a:hover  color: #ffffff; background-color: #00BFFF; 

a:active  color: #ffffff; background-color: #00BFFF; 




/*Navigation*/
#Navigation 
float: right;
background: #192839 url(images/bg_nav_left.gif) left bottom no-repeat;


#Navigation ul 
float: left;
background: url(images/bg_nav_right.gif) right bottom no-repeat;
padding: 0 .8em 2px;
margin: 0;

#Navigation li 
float: left;
list-style: none;
margin: 0;
background: none;
padding: 0;

#Navigation li a 
float: left;
padding: 0 1em;
line-height: 25px;
font-size: 1.2em;
color: #D0D0D0;
text-decoration: none;
margin-bottom: 2px;

#Navigation li.current a, #Navigation li.current a:hover 
    border-bottom: 2px solid #176092;
    background: #192839;
    margin-bottom: 0;
    cursor: default;
    color: #D0D0D0;

#Navigation li a:hover 
color: #fff;
border-bottom: 2px solid #4082ae;
margin-bottom: 0;


#Navigation li.current a, #Navigation li.current a:hover 
    border-bottom: 2px solid #176092;
    background: #192839;
    margin-bottom: 0;
    cursor: default;
    color: #D0D0D0;

非常感谢您的所有帮助！

【问题讨论】：

哎呀，刚刚在我的代码中发现了一个错字...编辑帖子以修复非常轻微的错字，但这还不是解决方案。 【参考方案1】：

Working Demo

jQuery 代码

$(function() 

  $("div.NavSubhead").hide();

  $('#Navigation li a').hover(
    function()$(this).next().stop(false, true).fadeIn(500);,
    function()$(this).next().stop(false, true).fadeOut(500);
  );

);

注意我添加了一个点击事件处理程序来防止演示中锚元素的默认操作

您可能还希望分别在每个事件处理程序中的fade 命令之前链接slideDown() 和slideUp()，以使动画更流畅

  $('#Navigation li a').hover(
    function()$(this).next().stop(false, true).slideDown().fadeIn(500);,
    function()$(this).next().stop(false, true).slideUp().fadeOut(500);
  );

您可能还想看看jQuery accordion，它基本上可以完成您在此处所做的工作，但也有一些其他选项。

编辑：

在您的两次更新之后，我知道问题出在哪里。您使用的幻灯片插件适用于 Mootools JavaScript 框架。此处提供的代码适用于 jQuery JavaScript 框架。虽然可以在同一页面上在您的站点上使用这两个框架，但两个框架都将一个对象分配给 $ 以用于选择，并且每种情况下的对象都有不同的方法、属性等。因此，要获得这两个框架要同时工作，我们需要避免这种冲突。幸运的是，jQuery 有一个命令可以轻松解决这个问题，noConflict()，它将释放$ 简写，以便其他框架可以使用它。请特别注意它必须包含在页面中的顺序。

所以要让代码正常工作，脚本的结构需要如下所示

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">
    // you can assign the jQuery object to another name if you want. Just
    // use var $j = jQuery.noConflict() and then can use $j() for jQuery object.
    jQuery.noConflict(); 

    // now your jQuery stuff comes here
    // there are a couple of techniques that can be used so that you can use the $
    // shorthand with jQuery library. I'll show you one here using a self-invoking
    // anonymous function that takes one parameter, $, into which we will pass the
    // the jQuery object

    (function($) 
      $(function() 

        $("div.NavSubhead").hide();

        $('#Navigation li a').hover(
            function()$(this).next().stop(false, true).fadeIn(500);,
            function()$(this).next().stop(false, true).fadeOut(500);
        );

      );
    )(jQuery); 

    // now put the Mootools script and relevant slideshow script.
    <script src="....." ></script>

    ....

有plenty of great slideshow and lightbox plugins for jQuery 提供与您链接到的 Mootools 类似的效果。

我认为，除非绝对对于某些特定的功能需要是必要的，否则我会坚持在我的网站中只使用一个 JavaScript 框架。这不仅避免了冲突，而且通常在一个框架中内置了一些方法来实现另一个框架的功能。即使框架不具备作为核心库一部分的功能，框架也被设计为可扩展的，因此具有允许开发插件和扩展功能以满足需求的架构。

【讨论】：

我把这段代码贴进去了，也试了demo代码，还是不行，很奇怪。由于包含表，它是否可能与导航 html 的约束有关？表格具有固定宽度。除此之外，我不知道是什么问题，并且正确引用了JQuery。 演示对您有用吗？您的页面中是否正确引用了 jQuery - 您可以使用简单的 $(function() alert("hello"); ); 进行测试当 DOM 完成加载时，应该会弹出一个警告对话框。 我也是这么想的，但是用一个没有包装到函数中的警报对其进行了测试，所以我认为它没有验证它——我现在就试试…… 是的，JQuery 工作，但仅当不在 document.ready 函数中时 - 这是正确的吗？哦，我一直将您作为答案发布的代码放入 document.ready 函数中，但即使您将其放在 document.ready 之外，它也不起作用。什么给了？ 对不起，我的意思是你好警报有效，但只有当不在 document.ready - jquery 工作时。【参考方案2】：

这对我有用。不过，您可能应该在标记中保持一致，并且在两种情况下都将隐藏文本显示在其关联链接之后。

$(document).ready(function()

    $('.NavSubhead').hide();

    $('li.hovertriggerssubhead').hover(
        function()
        
            $('.NavSubhead', $(this)).show();
        ,
        function()
        
            $('.NavSubhead', $(this)).hide();
        
    );
);

【讨论】：

谢谢，但即使使用下面的工作演示，我也遇到了麻烦，所以一旦我弄清楚发生了什么，我会尝试你的方式。再次感谢！【参考方案3】：

我没有对此进行测试，但我认为它应该可以工作：

$(document).ready(function() 

  //first method
  $(".NavSubhead").hide();

  $('#Navigation li').hover(
    function()$('div.NavSubhead', this).fadeIn(500);,
    function()$('div.NavSubhead', this).fadeOut(500);
  );

【讨论】：

测试中...提前致谢！将报告结果。 不，不工作，但无论如何你都要帮忙！但是，代码在我未经训练的眼睛看来正确......有人能告诉我为什么这也不起作用吗？谢谢！ 对不起，我的意思是“但还是谢谢你的帮助”，拼错了“谢谢”。

以上是关于Jquery：当悬停在菜单项上时，显示文本的主要内容，如果未能解决你的问题，请参考以下文章

将鼠标悬停在文本上时，更改文本和背景图像

悬停列表项时菜单消失

css 将鼠标悬停在子菜单项上时的样式父菜单项

悬停在子菜单上后保持父菜单项突出显示（HTML/CSS/Jquery）

悬停或单击时的 Jquery 下拉菜单

将鼠标悬停在菜单项上时如何下划线？