0

我的同事今天帮助我编写了这个脚本，它在我的测试示例中运行良好，但是当我尝试将它合并到我的网站设计中时它不起作用。对象是使用 div(boxEnd) 来倾斜和圆化菜单栏末端的角，并应用最后一个菜单项 (menlast) 的悬停状态。在我的示例中，我只有一个“a”元素，但是当我添加第二个元素时，悬停状态被两个“a”元素应用于 div。所以我需要修复当前代码以利用脚本，并弄清楚如何仅在最后一个菜单项悬停时调用脚本。

<script>
$(document).ready(function() {
    $('nav').hover(function() {
        $(this).children('a').children('#boxEnd').css('background-color','#ffffff');
    }, function() {
        $(this).children('a').children('#boxEnd').css('background-color','#ff2d0a');
    });
});
</script>

</head>

<body>

<!-- TOP NAV -->

<div id="NAVcontainer">
<div align="center" id="topnav">
  <div align="left" id="logo"><img src="images/mml-3-24-264x102.png"/></div>
  <div align="left" id="menu">
    <nav> 
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#portfolio">Portfolio</a>
    <a id="menlast" href="#contact">Contact
    <div id="boxEnd">&emsp;</div></a>
    </nav>
  </div>
</div>
</div>
4

2 回答 2

0

当你菊花链 $().children 它不会抓住所有孩子的所有孩子。它只会得到第一个孩子的孩子。如果这是您的实际 HTML，那么您想要

$('nav').hover(function() { $('#boxEnd').css(...); });

不需要考虑nav 和#boxEnd 之间的关系。$('#boxEnd') 总是会找到正确的 div。

这假设您发布的代码是您尝试解决问题，而不是您添加第二个“a”后最初的代码。如果那是错误的，我将使用更多详细信息进行编辑。

于 2013-03-29T01:03:37.670 回答
0

只需在.children('a')后面加上.end() http://api.jquery.com/end/ .end() 说明：结束当前链中最近的过滤操作，返回匹配的元素集合到它以前的状态。

所以本质上是 $(this).children('a').end().children('#boxEnd').css('background-color','#ffffff');

见小提琴 http://jsfiddle.net/v3szF/5/

 $('nav').hover(function() {
    $(this).children('a').end().children('#boxEnd').css('background-color','#ffffff');
}, function() {
    $(this).children('a').end().children('#boxEnd').css('background-color','#ff2d0a');
});
于 2013-03-29T01:20:41.933 回答