Question

我的同事今天帮助我使用这个脚本，它在我的测试样本中工作得很好，但是当我尝试将它合并到我的网站设计中时它不起作用。对象是使用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>

Answer 1

当你菊花链接$（）。孩子时，它并没有抓住所有孩子的所有孩子。它只会让第一个孩子的孩子。如果这是您的实际HTML，那么您需要

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

没有必要考虑nav和#boxEnd之间的关系。 $（'＃boxEnd'）总是会找到正确的div。

这假定您发布的代码是您尝试解决问题，而不是您添加第二个“a”后最初的问题。如果那是错的，我会用更多细节编辑它。

Answer 2

在.children（'a'）之后添加.end（） http://api.jquery.com/end/ .end（）描述：结束当前链中最近的过滤操作，并将匹配元素集返回到先前的状态。

基本上如此。$（本）。儿童（ 'a'）的端部（）的儿童（ '＃boxEnd'）的CSS（ '背景色'， '＃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');
});

Javascript将悬停状态应用于div的麻烦

2 个答案: