Displaying two buttons on top of an image on hover

user_7407097 0
Viewed 35

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;
}
reactjs css html javascript
1 Answers

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;
}
user_156475630
Related