Question

所以这是一个HTML片段 - 我想到的是这些按钮的每个背景图像在悬停时都会发生变化。但我想我在这里没有正确的课程设置。我已经阅读了很多令人困惑的文章，关于如何从类和类似的东西中确定div，但实际上我对它的想法非常混乱，所以我想我的代码并不理想。

这是我的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>

我的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";
}

在HTML和CSS中格式化这些类的正确方法是什么？我现在所拥有的不起作用。如果你能指导我一些好的文章我会很感激。

提前致谢。

Answer 1

变化

background-image: "graphicdesign_1.png";

到

background-image: url("graphicdesign_1.png");

两张图片

在css中格式化不同类的正确方法是什么？

1 个答案: