当父是flex

Question

JSFiddle Demo

问题 -

.popupcard_first:hover .popupcard_first { 
    display: block; 
} 

我希望将:hover与第一张优惠卡联系起来，但只有我发现能让它发挥作用的方式才是改变.popupcard ...到

.featured_cards:hover .popupcard_first { 
    display: block; 
}

但这不是我需要的，因为它适用于行的每个元素

<div class="featured_cards">

            <div class="card_one"><a href=""><img src="https://maxcdn.icons8.com/Share/icon/Logos//jsfiddle1600.png" alt=""></a>
            </div>
            <div class="popupcard_first">
                <div class="circle"><a href=""><img src="https://maxcdn.icons8.com/Share/icon/Logos//jsfiddle1600.png" alt=""></a></div>
                <div class="textname">Fishnet Chair</div>
                <div class="smalltextname">Seat and back with upholstery made of cold cure foam</div>
            </div>

            <div class="cards center two"><a href=""><img src="https://maxcdn.icons8.com/Share/icon/Logos//jsfiddle1600.png" alt=""></a>
            </div>

            <div class="cards center three"><a href=""><img src="https://maxcdn.icons8.com/Share/icon/Logos//jsfiddle1600.png" alt=""></a></div>

            <div class="cards edge four"><a href=""><img src="https://maxcdn.icons8.com/Share/icon/Logos//jsfiddle1600.png" alt=""></a></div></div>

CSS

*{
  width 1380px;
}
img[title='arrow'] {
    display: inline;
    width: 9px;
    height: 13px;
}
.featured_cards img{
  width: 270px;
  height: 270px;
}
.featured_cards {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-right: 98px;
    margin-left: 98px;
    position: relative;
    height: 270px;
    margin-top: 50px;
}

.popupcard_first {
    height: 270px;
    width: 270px;
    position: absolute;
    background-color: white;
    opacity: 0.9;
    display: none;
}

.featured_cards:hover .popupcard_first {
    display: block;
}

.circle {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 24px;
    background-color: #ffffff;
    box-shadow: 0px 2px 4.9px 0.2px rgba(33, 33, 33, 0.35);
    margin: 62px 111px 0px 111px;
}

.circle img {
    margin: 14px 18px;
    width: 12px;
    height: 20px;
}

.textname {
    width: 145px;
    height: 17px;
    object-fit: contain;
    font-family: Montserrat;
    font-size: 21px;
    font-weight: bold;
    line-height: 1.36;
    text-align: center;
    color: #212121;
    margin: 19px 62px 0 63px;
}

.smalltextname {
    width: 206px;
    height: 33px;
    object-fit: contain;
    font-family: Montserrat;
    font-size: 13.9px;
    font-weight: 300;
    line-height: 1.57;
    text-align: center;
    color: #6c6c6c;
    text-align: center;
    margin: 23px 32px 0px 32px;

}

谢谢

Answer 1

我查看了代码，如果将div popupcard_first中的div放在div card_one的div中，则会更好。所以CSS的变化是：

<强> CSS：

.popupcard_first {
  height: 270px;
  width: 270px;
  position: absolute;
  top:0px;
  left:0px;
  background-color: white;
  opacity: 0.9;
  display: none;
}
.card_one{
  position:relative;
}
.card_one:hover .popupcard_first {
  display: block;
}

为什么我推荐这种方法是因为，我尝试使用原始代码，这会导致元素悬停时出现闪烁问题。请参阅：here

所以它是如何进行的，首先你需要将所有作为卡片的div设置为position: relative，然后将popupcard_first的popover div设置为position; absolute，这将设置div位置，相对于card_one的父级，然后我们告诉只有当card_one div悬停时，才会显示popupcard_first。

最后这是一个有效的演示。

JSFiddle Demo

如果您遇到任何问题，请告诉我。