时间戳

首页 > 解决方案 > 如何添加悬停来交换 flexbox 中包含的图像？

html - 如何添加悬停来交换 flexbox 中包含的图像？

问题描述

我正在尝试更改我在 flex 元素中的图像，但在这一点上，我已经没有什么想法可以做，或者是否有可能。另外，我想保留图像后面的背景颜色，如果它有什么不同的话。

这也是我第一次使用 flexbox。三天前我开始学习编码。所以如果这是一个愚蠢的问题，我很抱歉。

HTML

    <main>
        <section class="digital">
            <img src="images/digital.png" alt="digital">
        </section>
        <section class="graphic">
            <img src="images/graphic.png" alt="graphic">
        </section>
        <section class="fashion">
            <img src="images/fashion.png" alt="fashion">
        </section>
        <section class="social">
            <img src="images/social.png" alt="social">
        </section>
    </main>

CSS

main{
    width: 100%;
    height: 600px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 100%;
    max-height: 100%;
}
.digital{
    flex: 1 1 auto;
    background: #9EF7CD;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
}
.graphic{
    flex: 1 1 auto;
    background: #FF8CAE;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
}
.fashion{
    flex: 1 1 auto;
    background: #F4B550;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
}
.social{
    flex: 1 1 auto;
    background: #9BC1FF;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
}
'''

标签： htmlcsshover

解决方案

最后，我找到了解决方案！不确定它是否是最优雅的，但它的工作方式符合我的预期。

谢谢大家，谁帮助！

    <main>
        <section class="digital">
            <div class="digital1"></div>
        </section>
        <section class="graphic">
            <div class="graphic1"></div>
        </section>
        <section class="fashion">
            <div class="fashion1"></div>
        </section>
        <section class="social">
            <div class="social1"></div>
        </section>
    </main>

CSS

main{
    width: 100%;
    max-height: 650px;
    display: flex;
    flex-wrap: wrap;
}
.digital{
    flex: 1 1 auto;
    display: flex;
    background: #9EF7CD;
    height: 650px;
    width: 250px;
}
.digital1{
    height: 650px;
    width: 250px;
    background-image: url(../images/digital-1.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin: 0 auto;
}
.digital1:hover{
    background-image: url(../images/digital-2.png);
}
.graphic{
    flex: 1 0 auto;
    display: inline-flex;
    background: #FF8CAE;
    height: 650px;
    width: 250px;
}
.graphic1{
    height: 650px;
    width: 250px;
    background-image: url(../images/graph-1.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin: 0 auto;
}
.graphic1:hover{
    background-image: url(../images/graph-2.png);
}
.fashion{
    flex: 1 0 auto;
    display: inline-flex;
    background: #F4B550;
    height: 650px;
    width: 250px;
}
.fashion1{
    height: 650px;
    width: 250px;
    background-image: url(../images/fashion-1.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin: 0 auto;
}
.fashion1:hover{
    background-image: url(../images/fashion-2.png);
}
.social{
    flex: 1 0 auto;
    display: inline-flex;
    background: #9BC1FF;
    height: 650px;
    width: 250px;
}
.social1{
    height: 650px;
    width: 250px;
    background-image: url(../images/social-1.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin: 0 auto;
}
.social1:hover{
    background-image: url(../images/social-2.png);
}

推荐阅读