当鼠标悬停时更改HTML/CSS盒子的尺寸

Question

当鼠标悬停时更改HTML/CSS盒子的尺寸

3

我有一个网页，其中有一些相同大小的盒子。其中一些被隐藏(.dummy)，其他的则可见，类别为.A、.B和.C，如下图所示：在这张图片中，为了简单起见只显示了dummy。在实际的HTML代码中，它们没有任何背景/边框，因此是不可见的。

enter image description here

现在，如果用户点击链接A，除了.A类之外的所有盒子都将消失。同样，对于其他链接也是如此。

enter image description here

当指针悬停在上面时，我希望只有div＃1盒子改变尺寸。然而，当我使用.hover命令时，整个页面会变形。我希望每个盒子保持原样，仅增加#div 1的宽度。同样，仅增加#div 2的height。为此，我必须编写每种效果的单独类吗？

编辑#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;
}

- xan

你可以再详细一些，"增加宽度"这个说法有点模糊，能否请您展示一下您目前已经完成的工作呢？如果没有看到代码，就像是一个"请替我完成"的请求，不要误解我的意思。 - Roko C. Buljan

假设“#div 2的高度”实际上是指#div 4的高度，并且您希望完全使用CSS完成此操作，那么是的，似乎需要为宽度和高度行为单独创建类。 - PassKit

啊，现在我明白了。如果我将鼠标悬停在#1上，你想让那个DIV的宽度增加2134像素，高度增加35像素！如果我将鼠标悬停在#4上，也要增加宽度，对吧！870像素！哇，让我创建整个演示吧。希望你现在看到你的问题是多么易懂了。 - Roko C. Buljan

@roXon：我使用JQuery添加了“.hover”类。现在，“.hover”被应用于所有具有“.A”的元素。因此，如果我在“#div1”上悬停，也会对“#div4”和“#div5”进行过渡。 - xan

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- benbai123 · Accepted Answer

如果所有的A类div都在同一个父元素下，您可以尝试使用nth-of-type选择器。

e.g.,

<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 选择器参考