什麼是在CSS中相互格式化不同類的正確方法？

所以這裏是一個HTML片段 - 我腦海中想到的是這些按鈕的背景圖像在懸停時發生變化。但我認爲我沒有在這裏設置正確的課程。我已經閱讀了很多關於如何從類和類似東西中確定div的令人困惑的文章，但是我的想法非常混亂，所以我想我的代碼並不理想。什麼是在CSS中相互格式化不同類的正確方法？

這裏是我的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這些類的正確方法？我現在有什麼不工作。此外，如果你能指導我一些很好的文章，我將不勝感激。

在此先感謝。

來源

2014-01-14 pearbear

我覺得你的代碼是正確的，所以你確定圖像的鏈接？ – kevpoccs

什麼不起作用？一切似乎都很好。有一件事要注意：如果一個div是唯一的，你可以給它一個ID。用CSS或JavaScript調用它可能更容易。 – ntgCleaner

background-image：url（'graphicdesign_1.png'）;並確保你有正確的道路！ – tilda

變化

background-image: "graphicdesign_1.png";

到

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

兩個圖像

來源

2014-01-14 22:38:39

在我發佈^^好工作@Gert B後，只需看到這個錯誤。 – kevpoccs

@Gert B. Op想要在懸停時更改「所以，這裏是一個HTML代碼段 - 我記住的是每個按鈕的背景圖片更改時懸停「 –

@kevpoccs愉快 –

什麼是在CSS中相互格式化不同類的正確方法？

回答

相關問題