I am fairly new to CSS and my goal to achieve here is that when I hover on image, two buttons appear (playbutton and addbutton). However, the code I have now, when I hover, only displays playbutton. I was wondering why this is the case and how I can make both appear. I am using React, HTML, and CSS for this project.
React here
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 here
.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;
}
the '+' in img:hover + .addbutton is the adjacent sibling selector, so it's better to use the general sibling selector '~'
you can use one of the following ways
img:hover ~ button {
display: inline-block;
color: yellow;
}
img:hover ~ .playbutton, img:hover ~ .playbutton{
display: inline-block;
color: yellow;
}
Your CSS file should become
.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;
}
*/
Yet
I would recommand the detection of the hover event on the parent, this way you can select the children easier, like
.cardObj:hover > .playbutton, .cardObj:hover > .playbutton{
display: inline-block;
color: yellow;
}