css - 带有悬停时出现的文本的容器

Question

我正在尝试使用一个圆形图标的信息框，它在悬停时会展开并包含一个文本框。同时，我希望图片也可以外部链接。我当前的代码在台式机上运行良好，但在移动设备上却不行，因为悬停功能需要您单击瓶子的图片 - 从而重定向您。

框内的文本用内容编码：

.boxbox1::after {
    content: "Vores røde eddiker er udelukkende IGP og DOP og findes i mange forskellige prisklasser. Tryk på flasken og se vores sortiment!";
}

我能想到但不知道如何执行的解决方案：

• 删除图片中的链接并在段落中添加文本并通过文本进行外部链接
• 不知何故，第一次点击图片展开文本框，然后第二次点击外部图片链接。

两种解决方案对我来说都很好，我没有偏好。先感谢您！

JSFiddle： https ://jsfiddle.net/rt9Ljsc6/

HTML：

<section id="eddikefarver">
            <h2 class="h2titel">Vores produkter</h2>
            <div class="bigbox">
                <div class="super-box">
                    <div class="infocontainer">
                        <div class="boxbox1">
                            <div class="icon_bg"></div>
                        </div>
                        <div class="icon">
                            <a href="#" class="billedelink">
                                <img width="42" height="40" src="img/balsamicoroed.png" alt="Rød balsamicoeddike ikon">
                            </a>
                        </div>
                    </div>
                    <div class="text">
                        <p class="title">Røde eddiker</p>
                    </div>
                </div>
                </div>
</section>

CSS：

.bigbox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: 35vh;
    font-family: system, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 20px;
    color: #5d6494;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.infocontainer {
    width: 220px;
    height: 220px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.boxbox1,
.boxbox2,
.boxbox3 {
    position: absolute;
    width: 220px;
    height: 220px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    border-radius: 3px;
    overflow: hidden;
    -webkit-transition: -webkit-box-shadow ease 1s;
    transition: -webkit-box-shadow ease 1s;
    transition: box-shadow ease 1s;
    transition: box-shadow ease 1s, -webkit-box-shadow ease 1s;
}

.icon {
    position: relative;
    -webkit-transition: all 0.6s ease;
    transition: all 0.6s ease;
    -webkit-transition-delay: 0.32s;
    transition-delay: 0.32s;
    will-change: transform;
}

.icon_bg {
    width: 80px;
    height: 80px;
    border-radius: 100%;
    border: 1px solid rgba(225, 227, 232, 0.18);
    -webkit-box-shadow: 0 3px 4px 0 rgba(44, 71, 146, 0.25);
    box-shadow: 0 3px 4px 0 rgba(44, 71, 146, 0.25);
    background-color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: all 0.6s ease;
    transition: all 0.6s ease;
    -webkit-transition-delay: 0.32s;
    transition-delay: 0.32s;
    will-change: transform;
}

.title {
    position: relative;
    font-size: 20px;
}

.super-box:hover .boxbox1,
.super-box:hover .boxbox2 .super-box:hover .boxbox3 {
    /*   border: 1px solid rgba(225, 227, 232, 0.18); */
    -webkit-box-shadow: 0 3px 4px 0 rgba(44, 71, 146, 0.25);
    box-shadow: 0 3px 4px 0 rgba(44, 71, 146, 0.25);
    -webkit-transition-delay: 0.32s;
    transition-delay: 0.32s;
}

.super-box:hover .icon_bg {
    -webkit-transform: translateY(-32px) scale(6);
    transform: translateY(-32px) scale(6);
}

.super-box:hover .icon {
    -webkit-transform: translateY(-48px) scale(1.4);
    transform: translateY(-48px) scale(1.4);
}

.super-box {
    width: 220px;
    height: 220px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 0 auto;
}

.text {
    position: relative;
    top: -32px;
    width: 200px;
    text-align: center;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    -webkit-transition-delay: 0.32s;
    transition-delay: 0.32s;
}

.super-box:hover .text {
    opacity: 0;
    -webkit-transform: translateY(-4px) scale(.8);
    transform: translateY(-4px) scale(.8);
}

.boxbox1::after,
.boxbox2::after,
.boxbox3::after {
    position: absolute;
    width: 200px;
    text-align: center;
    top: 111px;
    opacity: 0;
    font-size: 13px;
    color: #5d6494;
    line-height: 20px;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    -webkit-transition-delay: 0.32s;
    transition-delay: 0.32s;
}

.boxbox1::after {
    content: "Vores røde eddiker er udelukkende IGP og DOP og findes i mange forskellige prisklasser. Tryk på flasken og se vores sortiment!";
}

.boxbox2::after {
    content: "Vi tilbyder en norditaliensk hvid balsamicoeddike som den eneste af sin slags, fordi den kort fortalt er ekstraordinær. Tryk på flasken for se mere!";
}

.boxbox3::after {
    content: "Vores balsamico-æbleeddiker er fra Gölles og fås i både spray-flaske og chianti flaske med prop. Tryk på flasken for at se mere!";
}

.super-box:hover .boxbox1::after,
.super-box:hover .boxbox2::after,
.super-box:hover .boxbox3::after {
    opacity: 1;
}

.billedelink:hover {
    opacity: 0.6;
}

标签： csshyperlinkflexboxhover