Question

我是jQuery的新手很抱歉，如果这听起来很愚蠢，但我正在向其他元素钻研。特别是我想用jquery淡化.menu li a：hover类。

CSS

.menu {
    padding:0;
    margin:0;
    list-style:none;
}
.menu li {
    float:left;
    margin-left:1px;
}
.menu li a {
    display:block;
    height:44px;
    line-height:40px;
    padding:0 5px;
    float:right;
    color:#fff;
    text-decoration:none;
    font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size:12px;
    font-weight:bold;
}
.menu li a b {
    text-transform:uppercase;
}
.menu li a:hover {
    color:#E4FFC5;
    background: url(../images/arrow.png) no-repeat center bottom;
}
.current {
    background: url(../images/arrow.png) no-repeat center bottom;
    font-size:16px;
    font-weight:bold;
}
.spacer p {
    display:block;
    height:44px;
    line-height:40px;
    padding:0 5px;
    float:right;
    color:#fff;
    text-decoration:none;
    font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size:12px;
    font-weight:bold;
}

HTML

 <ul class="menu">
    <li class="current"><a href="index.html">Home</a></li>
    <li class="spacer">
        <p>|</p>
    </li>
    <li><a href="#">Mission &amp; Values </a></li>
    <li class="spacer">
        <p>|</p>
    </li>
    <li><a href="#">Caregivers</a></li>
    <li class="spacer">
        <p>|</p>
    </li>
    <li><a href="#">Special Programs </a></li>
    <li class="spacer">
        <p>|</p>
    </li>
    <li><a href="#">Enployment</a></li>
    <li class="spacer">
        <p>|</p>
    </li>
    <li><a href="#">Contact</a></li>
</ul>

的Javascript

<script type="text/javascript">

$(function() {
    $('a').mouseover(function() {
        $('.logo').animate ({opacity:'0.6'}, 'normal');
    });

    $('a').mouseout (function() {
        $('.logo').animate ({opacity:'1'}, 'normal');
        $('.menu li a:hover').fadeIn ('slow');
    });
</script>

Answer 1

而不是这个

$('.menu li a:hover').fadeIn ('slow');

注意：这里你说'找到我所有目前在其中徘徊的元素在类.menu中的LI，并在'

中淡化它们

你想要或许要说的是“在一个班级中找到我所有的一个元素。在菜单中。当其中一个被覆盖时，将其淡入。”

我建议像

$('.menu li a').hover(function(){ $(this).fadeIn ('slow'); }, 
                      function(){ $(this).fadeOut('slow'); });

Answer 2

您正在寻找的选择器是

$("ul.menu > li > a")

我认为你试图在鼠标移出时将锚标记淡化到特定级别并将鼠标悬停在鼠标上。为此，您可以使用 fadeTo 方法

$(function() {
    $('ul.menu > li > a').hover(function() {
        $(this).fadeTo ('slow',1);
    },
    function() {
        $(this).fadeTo ('slow',0.5);
    });

Answer 3

如果你稍微改变你的课程，你可以这样做：

将hove改为班级：

.menu li a.hover {
    background: url(../images/arrow.png) no-repeat center bottom;
}

使用该类中的背景动画字体颜色，将所有jQuery替换为：

$(function() {
  $('.menu li a').hover(function() {
    $('.logo').animate ({opacity:'0.6'}, 'normal');
    $(this).addClass("hover").animate({ color:'#E4FFC5'}, "slow");
  }, function() {
    $('.logo').animate ({opacity:'1'}, 'normal');
    $(this).removeClass("hover").animate({ color:'#fff' }, "slow");
  });
});

Answer 4

如果您使用Firefox，则可以安装firebug。使用firebug，您可以在javascript上设置断点，然后换行。您还可以直接检查DOM并查看DOM是如何等等。

如何深入了解jQuery？

4 个答案: