Here is an interesting challenge - I want each of these buttons to have their background image change when hovered over. However, I'm struggling with the class setup in my code. I've been trying to understand how to distinguish between divs and classes, but the information I found is confusing and messy in my mind. I believe my code is far from ideal.
Take a look at my HTML:
<div class="option graphic">
GRAPHIC DESIGN
</div>
<div class = "option product">
PRODUCT DESIGN
</div>
<div class = "option web">
WEB DESIGN
</div>
<div class = "option design">
APP DESIGN
</div>
And here is my CSS:
.option{
color: #FFFFFF;
line-height: 100px;
text-align: center;
font-size: 36px;
font-weight: bold;
margin-top: 10px;
margin-right: auto;
margin-left: auto;
width: 813px;
height: 100px;
background-color: #383838;
cursor: pointer;
cursor: hand;
}
.option.graphic{
background-image: "graphicdesign_1.png";
}
.option.graphic:hover{
background-image: "graphicdesign_2.png";
}
I'm struggling to figure out the correct formatting for these classes in HTML and CSS. What I have now is not producing the desired result. Any tips or links to helpful articles would be greatly appreciated.
Thank you in advance.