如何同时在框上悬停和过渡？仅使用 css 和 html

Question

我有一个问题我无法解决。

目标是将鼠标悬停在左上角的黄色方块上以触发下面的每个彩色框展开以显示 p 标签的内容以及它们包含的 h3 标签。将鼠标悬停在黄色方块上应该也会触发黄色方块旋转 180 度。

我已经尝试了下面的 CSS，但效果不佳。

.rotate-arrow {
    text-align: center;
}
.rotate-arrow .button {
    height: 30px;
    width: 30px;
    background-color:yellow;
    padding: 0;
    margin: 22px 980px 30px 0;
    transition: transform 0.6s linear;
}
.rotate-arrow img:hover ~ .container .colored-boxes .box{
    /* transform: rotate(180deg); */
    max-height: 250px;
}

.colored-boxes {
    display: flex;
    justify-content: center;
}
.green-boxes div {
    width: 300px;
    background-color: #007B2D;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin: 0 27px 30px 27px;
    transition: max-height 2s linear;
    max-height: 60px;
    overflow: hidden;
}
/* .box:hover {
    max-height: 250px;
} */
.blue-boxes div {
    width: 300px;
    background-color: #004F91;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin: 0 27px 30px 27px;
    transition: max-height 2s linear;
    max-height: 60px;
    overflow: hidden;
}
.red-boxes div {
    width: 300px;
    background-color: #950000;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin: 0 27px 30px 27px;
    transition: max-height 2s linear;
    max-height: 60px;
    overflow: hidden;
}

.colored-boxes h3 {
    color: #FFFFFF;
    font-size: 20px;
    padding: 16px 0px 26px 16px;
    margin: 0;
}
.colored-boxes p {
    color: #CACACA;
    font-size: 14px;
    margin: 0;
    padding: 0 10px 32px 15px;
}

 <div class="container">
    <div class="rotate-arrow">
        <div class="button"></div>
    </div>
        <div class="colored-boxes">
            <div class="green-boxes">
                <div class="box">
                    <h3>Box Title 1</h3>
                    <p>It is a long established fact that a reader will be distracted by the readable content</p>
                </div>
                <div class="box">
                    <h3>Box Title 2</h3>
                    <p>It is a long established fact that a reader will be distracted by the readable contentIt is a long established fact that a reader will be distracted by the readable contentIt is a long established fact that a r</p>
                </div>
            </div>
            <div class="blue-boxes">
                <div class="box">
                    <h3>Box Title 4</h3>
                    <p>It is a long established fact that a reader will be distracted by the readable contentIt is a long established fact that a reader will be distracted by the readable contentIt is a long established fact that a rcontentIt is a long established fact that a </p>
                </div>
                <div class="box">
                    <h3>Box Title 5</h3> 
                    <p>It is a long established fact that a reader will be distracted by the readable content</p>
                </div>
            </div>
            <div class="red-boxes">
                <div class="box">
                    <h3>Box Title 7</h3>
                    <p>It is a long established fact that a reader will be distracted by the readable contentIt is a long established fact that a reader will be distracted by the readable contentIt is a long established fact that a reader will be distracted by the readable contentIt is a long established fact that a reader will be distracted by the readable </p>
                </div>
                <div class="box">
                    <h3>Box Title 8</h3>
                    <p>It is a long established fact that a reader will be distracted by the readable content</p>
                </div>
            </div>
        </div>
    </div>

http://jsfiddle.net/t3vuf0xp/

Answer 1

这是一个纯粹的 CSS 解决方案：

.rotate-arrow:hover ~ .colored-boxes .box {
    max-height: 250px;
}

.rotate-arrow:hover .button {
    transform: rotate(180deg);
}

请注意，这会在 .rotate-arrow div 悬停时触发行为，而不是在 .rotate-arrow 内的黄色 .button div 悬停时触发行为。这是因为目前there is no parent selector in CSS, so we can't select the yellow box's parent element's sibling elements using pure CSS. The :has() pseudo selector, which would also let us achieve what you want in pure CSS by letting us select .rotate-arrow when it contains a hovered .button (the selector would be .rotate-arrow:has(.button:hover) ~ .colored-boxes .box), is a Level 4 selector that currently cannot be used in stylesheets，只有像document.querySelector()这样的JavaScript功能，浏览器还不支持。

如果您希望该行为仅在将鼠标悬停在黄色框上时触发，而不是在黄色框的父元素（包含黄色框右侧的空 space ）上触发，您可以：

使用JavaScript响应悬停在黄色框上
如果你真的需要一个纯粹的 CSS 解决方案，你能做的最好的（我能想到的）就是让黄色框的父元素与像这样将 .rotate-arrow .button 上的边距转移到 .rotate-arrow 上的黄色框（另外：你真的需要这么大的右边距吗？）
```
.rotate-arrow {
    display: inline-block;
    margin: 22px 980px 30px 0;
}

.rotate-arrow .button {
    margin: 0;
}
```

这是一个工作片段：

.rotate-arrow {
    text-align: center;
 display: inline-block;
 margin: 22px 980px 30px 0;
}

.rotate-arrow:hover ~ .colored-boxes .box {
 max-height: 250px;
}

.rotate-arrow:hover .button {
 transform: rotate(180deg);
}

.rotate-arrow .button {
    height: 30px;
    width: 30px;
    background-color:yellow;
    padding: 0;
    margin: 0;
    transition: transform 0.6s linear;
}


.colored-boxes {
    display: flex;
    justify-content: center;
}
.green-boxes div {
    width: 300px;
    background-color: #007B2D;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin: 0 27px 30px 27px;
    transition: max-height 2s linear;
    max-height: 60px;
    overflow: hidden;
}

.blue-boxes div {
    width: 300px;
    background-color: #004F91;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin: 0 27px 30px 27px;
    transition: max-height 2s linear;
    max-height: 60px;
    overflow: hidden;
}
.red-boxes div {
    width: 300px;
    background-color: #950000;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin: 0 27px 30px 27px;
    transition: max-height 2s linear;
    max-height: 60px;
    overflow: hidden;
}

.colored-boxes h3 {
    color: #FFFFFF;
    font-size: 20px;
    padding: 16px 0px 26px 16px;
    margin: 0;
}
.colored-boxes p {
    color: #CACACA;
    font-size: 14px;
    margin: 0;
    padding: 0 10px 32px 15px;
}

<div class="container">
    <div class="rotate-arrow">
        <div class="button"></div>
    </div>
        <div class="colored-boxes">
            <div class="green-boxes">
                <div class="box">
                    <h3>Box Title 1</h3>
                    <p>It is a long established fact that a reader will be distracted by the readable content</p>
                </div>
                <div class="box">
                    <h3>Box Title 2</h3>
                    <p>It is a long established fact that a reader will be distracted by the readable contentIt is a long established fact that a reader will be distracted by the readable contentIt is a long established fact that a r</p>
                </div>
            </div>
            <div class="blue-boxes">
                <div class="box">
                    <h3>Box Title 4</h3>
                    <p>It is a long established fact that a reader will be distracted by the readable contentIt is a long established fact that a reader will be distracted by the readable contentIt is a long established fact that a rcontentIt is a long established fact that a </p>
                </div>
                <div class="box">
                    <h3>Box Title 5</h3> 
                    <p>It is a long established fact that a reader will be distracted by the readable content</p>
                </div>
            </div>
            <div class="red-boxes">
                <div class="box">
                    <h3>Box Title 7</h3>
                    <p>It is a long established fact that a reader will be distracted by the readable contentIt is a long established fact that a reader will be distracted by the readable contentIt is a long established fact that a reader will be distracted by the readable contentIt is a long established fact that a reader will be distracted by the readable </p>
                </div>
                <div class="box">
                    <h3>Box Title 8</h3>
                    <p>It is a long established fact that a reader will be distracted by the readable content</p>
                </div>
            </div>
        </div>
    </div>

如何同时在框上悬停和过渡？仅使用 css 和 html

How can I hover and trasition on boxes at the same time? only use css and html

html

css

transition

transform

hover