悬停时在图像顶部显示两个按钮

Question

我对CSS还很陌生，我在这里要实现的目标是，当我将鼠标悬停在图像上时，会出现两个按钮(playbutton和addbutton(。然而，当我悬停时，我现在拥有的代码只显示播放按钮。我想知道为什么会出现这种情况，以及如何让两者都出现。我在这个项目中使用了React、HTML和CSS。

此处反应

function MainCard(){
return(
<div>
<div className="mainCardObject">
<ul>
<li>
<div className="cardObj">
<img src={HipHopCard} className ="mainCardImage" />
<button className="playbutton">play</button>
<button className="addbutton">add</button>
</div>

</li>
<li>
<div className="cardObj">
<img src={HouseCard} className = "mainCardImage" />
<button className="playbutton">play</button>
<button className="addbutton">add</button>
</div>

</li>
<li>
<div className="cardObj">
<img src={PopCard} className = "mainCardImage"/>
<button className="playbutton">play</button>
<button className="addbutton">add</button>
</div>
</li>
</ul>
</div>
</div>
)

}

CSS此处

.playbutton{
background-color: red;
position: absolute;
margin-top: 120px;
margin-left: 10px;
display: none;
}
.addbutton{
background-color: turquoise;
position: absolute;
margin-top: 120px;
margin-left: 200px;
display: none;
}
img:hover + .playbutton, .playbutton:hover {
display: inline-block;
color: yellow;
}
img:hover + .addbutton, .addbutton:hover {
display: inline-block;
color: yellow;
} 

Answer 1

img中的'+'：悬停+.addbutton是相邻的同级选择器，因此最好使用通用同级选择器'~'

您可以使用以下方法之一

img:hover ~ button {
display: inline-block;
color: yellow;
}

img:hover ~ .playbutton, img:hover ~ .playbutton{
display: inline-block;
color: yellow;
}

您的CSS文件应该成为

.playbutton{
background-color: red;
position: absolute;
margin-top: 120px;
margin-left: 10px;
display: none;
}
.addbutton{
background-color: turquoise;
position: absolute;
margin-top: 120px;
margin-left: 200px;
display: none;
}
img:hover ~ .playbutton, img:hover ~ .addbutton {
display: inline-block;
color: yellow;
} 
/*if you want the on hover button too uncomment this
.addButton:hover, .playButton:hover {
display: inline-block;
color: yellow;
} 
*/

然而

我建议在父对象上检测悬停事件，这样你可以更容易地选择子对象，比如

.cardObj:hover > .playbutton, .cardObj:hover > .playbutton{
display: inline-block;
color: yellow;
}