4

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

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

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

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

我看到的所有使用“查找”的示例都使用命名父级；但我只需要使用悬停在当前父级上的子级（$this）。

编辑/更新：

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

在此处输入图像描述

4

3 回答 3

6

不要编写脚本，而是尝试在所有悬停元素上使用 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/

于 2012-11-09T14:42:42.707 回答
3

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

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

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

.hover {
    background-color: lightblue;
}

更新的小提琴

或者你可以更具体

.hover, .inner.hover {
  background-color: lightblue;
}
于 2012-11-09T14:39:07.940 回答
0

我会使用“儿童”功能：

$(".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/

于 2012-11-09T14:42:10.367 回答