在jQuery中为孩子添加悬停类？答案

【问题标题】：Add class on hover for children in jQuery?在jQuery中为孩子添加悬停类？
【发布时间】：2012-10-29 21:19:21
【问题描述】：

我有一个页面，其中包含一系列“平铺”div，每个 div 都有一个或多个子 div。

我想，在滚动父 div 时，将它的类和所有 div 更改为悬停状态。

我可以很容易地让父 div 工作，但不能让孩子：See Fiddle

$('.tile').hover(
            function () {
                $(this).addClass("hover");
                $(this).find('.inner').addClass("hover");
              },
              function () {
                $(this).removeClass("hover");
                $(this).find('.inner').removeClass("hover");
              }
        )

我看到的所有使用“find”的例子都使用了一个有名的父级；但我只需要使用悬停在 ($this) 上的当前父级的子级。

编辑/更新：

我的部分问题是在 div 内部有一个图像按钮。该按钮应该有自己的翻转。请参阅下面设计师的图片。我可以得到第一个组合——所有的青色和白色加号按钮......但是使用 CSS 我不能影响 lus 按钮的 PARENTS，可以吗？

【问题讨论】：

这些 .tiles 是否有两种不同的状态 - 一种是在将图块添加到用户目的地之前（灰色按钮，白色背景），另一种是在添加后（蓝色按钮，白色背景） ?
不清楚，但根据这些规范，当您将鼠标悬停在磁贴上时，他们希望较低的翻转，然后当您将鼠标悬停在按钮本身上时，右上方的翻转。 This might work
这是“在合成中看起来很漂亮，但使用时毫无意义”类型的静态设计之一 :) 祝你好运！

标签： jquery css hover jquery-hover

【解决方案1】：

不要编写脚本，而是尝试在所有悬停元素上使用 CSS 伪类 :hover，例如：

    .tile {
        width: 200px;
        height: 300px;
        background-color: yellow;
        margin: 20px;
    }
    .tile:hover {
        background-color: lightblue;
    }
    .inner {
        width: 200px;
        height: 50px;
        background-color: goldenrod;
    }

    .tile:hover .inner{
        background-color:#369;
    }

    .tile:hover button{
        color:#ff0000;
    }
    .tile:hover button:hover{
        color:#00ff00;
    }

没有脚本，不用担心:)

小提琴：http://jsfiddle.net/67tCr/

【讨论】：

支持 CSS > JS。使用 CSS，性能总是会更好。
是的，我同意。我不知道（出于某种原因）对子项的悬停更改将本地化到相关的图块。这很棒。
多阶段悬停是可能的！

【解决方案2】：

您的代码很好...您只需要重新排序您的 css 规则：

.tile {
    width: 200px;
    height: 300px;
    background-color: yellow;
    margin: 20px;
}

.inner {
    width: 200px;
    height: 50px;
    background-color: goldenrod;
}

.hover {
    background-color: lightblue;
}

updated fiddle

或者你可以更具体

.hover, .inner.hover {
  background-color: lightblue;
}

【讨论】：

【解决方案3】：

我会使用“儿童”功能：

$(".title").hover(function(){
  $(this).addClass("hover");
  $(this).children(".inner").addClass("hover");
},function(){
  $(this).removeClass("hover");
  $(this).children(".inner").removeClass("hover");
});

这是小提琴： http://jsfiddle.net/ckaufman/qXU7R/1/

【讨论】：