Question

我有一个由以下HTML组成的简单导航;

<div class="inner">
<div class="button"><img class="portal" src="images/portalbutton.png" /></div>
<a href="#"><div class="prod_description">&nbsp;</div></a>
</div>

有许多项目（全部设置为彼此并排放置）以构成导航栏。

当我将鼠标悬停在.button和/或.prod_description上时，我希望.inner <div>添加类.hover。这样我就可以围绕整个事物设置背景图像（有点像突出显示导航项目）。

我只想在另一个.hover悬停时删除.button or .prod_description，在这种情况下，此导航项会占用.hover类。

Answer 1

当我将鼠标悬停在.button和/或.prod_description上时，我希望.inner <div>添加课程.hover。

除非你的CSS以非常聪明的方式定位，否则这与悬停.inner本身一样，对吧？如果是这样，任务可以解决如下：

$('.inner').hover(function() {
    $('.inner').removeClass('hover');
    $(this).addClass('hover');
});

如果我对定位的假设不成立，那么代码必须看起来更像这样：

$('.inner .button, .inner .prod_description').hover(function() {
    $('.inner').removeClass('hover');
    $(this).parents('.inner').addClass('hover');
});

在后一个代码示例中，请注意parents()的使用 - 不要与parent()混淆。

Answer 2

试试这个：

$(document).ready(function(){
  $(".button").hover(
   function () {
      $(".inner").removeClass("hover");
      $(this).parent(".inner").addClass("hover");
   },
   function () {}
 );
 $(".prod_description").hover(
   function () {
      $(".inner").removeClass("hover");
      $(this).parent("a").parent("inner").addClass("hover");
   },
   function () {}
 ); });

Answer 3

通过对html的这一小改动，Javascript将更容易编写：

<div class="inner">
    <div class="button"><img class="portal" src="images/portalbutton.png" /></div>
    <div class="prod_description"><a href="#">stuff</a></div>
</div>

然后，你的Javscript函数看起来像这样。当您悬停某个项目时，它会从所有项目中删除hover类并将其应用于当前项目。这样，即使离开项目，hover课程也会保留。

$(document).ready(function() {
            $('div.button, div.prod_description').mouseover(function() {
                $('div.inner').removeClass('hover');
                $(this).parent().addClass('hover'); //The HTML change was to allow the call to parent() to be the same
            });
        });

移动到下一个菜单项时删除类

3 个答案: