Javascript Jquery：将鼠标悬停在菜单项上时，显示文本_Javascript_Jquery_Css_Navigation_Hover

Javascript Jquery：将鼠标悬停在菜单项上时，显示文本

javascript jquery css navigation

Javascript Jquery：将鼠标悬停在菜单项上时，显示文本,javascript,jquery,css,navigation,hover,Javascript,Jquery,Css,Navigation,Hover,我不熟悉JQuery，但希望在我正在构建的站点中使用它当用户使用li classhovertriggersubhead将鼠标悬停在菜单中的某个项目上时，我想在其下方显示一些文本，位于div（嵌套在li中）中，id为NavSubhead。我已经看了几个例子，即JQuery文档常见问题解答中的菜谱和JQuery站点本身的代码这是我的HTML代码： <div id="Navigation"> <ul> <li class="current"> <a hr

我不熟悉JQuery，但希望在我正在构建的站点中使用它

当用户使用li class

hovertriggersubhead

将鼠标悬停在菜单中的某个项目上时，我想在其下方显示一些文本，位于div（嵌套在li中）中，id为

NavSubhead

。我已经看了几个例子，即JQuery文档常见问题解答中的菜谱和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>

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

更新：我尝试了很多答案，甚至有一个演示可以正常工作，但仍然不起作用，这很奇怪。由于一个包含的表，它可能和导航html的约束有关吗？这张桌子有固定的宽度。除此之外，我不知道问题出在哪里，JQuery被正确引用了。提前谢谢

更新#2：由于我的HTML有一些奇怪的限制，这可能不起作用，我将在这里发布它。正如你在下面看到的，我也在使用幻灯片框架

<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 width="980"> <!--980 -->

<tr>

<td width="880">

<table width="880"> <!--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 width="700">
<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" alt="" />
  </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>

非常感谢您的帮助

我还没有测试过这个，但我认为应该可以：

$(document).ready(function() {

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

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

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

$(document).ready(function() {

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

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

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

$(document).ready(function()
{
    $('.NavSubhead').hide();

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

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

$(document).ready(function()
{
    $('.NavSubhead').hide();

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

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);}
  );

});

注意：我添加了一个click事件处理程序，以防止在演示中对锚元素执行默认操作

您可能还希望在每个事件处理程序中的

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);}
  );

您可能还想看看，它基本上与您在这里所做的相同，但也有一些附加选项

编辑：

在你两次更新之后，我知道问题出在哪里了。您正在使用的幻灯片放映插件用于Mootools JavaScript框架。这里提供的代码是针对jQuery JavaScript框架的。虽然可以在同一页面上使用站点上的两个框架，但两个框架都将一个对象分配给

以供选择，并且在每种情况下，该对象都有不同的方法、属性等。因此，为了让两个框架同时工作，我们需要避免这种冲突。幸运的是，jQuery有一个命令可以轻松解决这个问题，它将发布

速记，以便其他框架可以使用它。请特别注意它必须包含在页面中的顺序

因此，要使代码正常工作，脚本的结构需要如下

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

    ....


//如果需要，可以将jQuery对象指定给其他名称。只是
//使用var$j=jQuery.noConflict（），然后可以对jQuery对象使用$j（）。
jQuery.noConflict（）；
//现在，您的jQuery内容出现在这里
//有两种技术可以用来使用$
//使用jQuery库进行速记。我将在这里向您展示一个使用自调用
//接受一个参数$的匿名函数，我们将把
//jQuery对象
（函数（$）{
$（函数（）{
$（“div.NavSubhead”）.hide（）；
$（'a'）。悬停(
函数（）{$（this）.next（）.stop（false，true）.fadeIn（500）；}，
函数（）{$（this）.next（）.stop（false，true）.fadeOut（500）；}
);
});
})（jQuery）；
//现在把Mootools脚本和相关的幻灯片脚本放进去。
....

有一些工具提供与您链接的Mootools类似的效果

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

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);} ); });
注意：我添加了一个click事件处理程序，以防止在演示中对锚元素执行默认操作
您可能还希望在每个事件处理程序中的
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);} );
您可能还想看看，它基本上与您在这里所做的相同，但也有一些附加选项
编辑：
在你两次更新之后，我知道问题出在哪里了。您正在使用的幻灯片放映插件用于Mootools JavaScript框架。这里提供的代码是针对jQuery JavaScript框架的。虽然可以在同一页面上使用站点上的两个框架，但两个框架都将一个对象分配给
$
以供选择，并且在每种情况下，该对象都有不同的方法、属性等。因此，为了让两个框架同时工作，我们需要避免这种冲突。幸运的是，jQuery有一个命令可以轻松解决这个问题，它将发布
$
速记，以便其他框架可以使用它。请特别注意它必须包含在页面中的顺序
因此，要使代码正常工作，脚本的结构需要如下

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

//如果需要，可以将jQuery对象指定给其他名称。只是 //使用var$j=jQuery.noConflict（），然后可以对jQuery对象使用$j（）。 jQuery.noConflict（）； //现在您的jQuery