3

我有一个网页有一些相同大小的框。其中一些是隐藏的 ( .dummy)，其他是可见的，可以说.A，.B&.C如下图所示：[为简单起见，仅在图像中显示。 dummy 在实际的 HTML 代码中，它们没有任何背景/边框，因此是不可见的。]

在此处输入图像描述

现在，如果用户点击link A，所有的盒子都期望 '.A' 类的盒子会fadeOut。同样，对于此处显示的其他链接。

在此处输入图像描述

当指针悬停时，我只希望该div#1框更改尺寸。但是，当我应用 .hover 命令时，整个页面都会被扭曲。我希望每个盒子都保持原样，只有宽度#div 1会增加。同样，只有 的height才能#div 2增加。为此，我是否必须为每个效果编写单独的类？

编辑#1

这些是我的相关代码：

.dummy {
    float:left;
    position:relative;
    overflow:hidden;
    width:6.36896%;
    height:22.2287%;
    margin:2px;
    background:none;
}

.A, .B, .C{
    background:rgba(0, 0, 0, .30);
    float:left;
    position:relative;
    overflow:hidden;
    width:6.36896%;
    height:22.2287%;
    margin:2px;
    box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
    -moz-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
    -webkit-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
}
4

1 回答 1

1

如果所有 A 类 div 都在同一个父级下，您可以尝试 nth-of-type 选择器，

例如，

<html>
    <head>
        <style>
            .A {
                width: 50px;
                height: 50px;
                border: 1px solid #CCC;
            }
            #outer div:nth-of-type(1) .A:hover {
                width: 300px;
            }
        </style>
    </head>
    <body>
        <div id="outer">
            <div>
                <div class="A"></div>
            </div>
            <div>
                <div class="A"></div>
                <div class="A"></div>
            </div>
        </div>
    </body>
</html>

再生：

W3C CSS 选择器参考

于 2013-01-05T10:51:52.983 回答