Onhover改變效果的CSS

我已經創建了圖像，鏈接，標題和一些值的框。我想創建鼠標懸停/懸停效果。Onhover改變效果的CSS

在這裏，我添加了類的事：

，但它不會產生效果。怎麼了。

這是錯誤的方式嗎？

.c1:hover{ 

.item .moreBtn{position: relative;font-size: 14px;margin-right: 10px;margin-top: 32px;} 

.item .pillBtn{-webkit-border-radius: 5px 5px 5px 5px;border-radius: 5px 5px 5px 5px;background:#7CDD97;padding: 10.5px 40px 8.0px 40px;color: #FFF;font-weight: bold;font-size: 20px;text-decoration: none;} 

    .item h6 {margin-top: 18px;} 

    .item{background:#F3F3F3;height: 70px;-webkit-border-radius: 5px 5px 5px 5px;border-radius: 5px 5px 5px 5px;} 

}

來源

2014-02-19 Programming_crazy

不能嵌套CSS，除非你使用SASS /更少/ SCSS。你必須'c1：hover .item .moreBtn {}' – ashley

即使在scss中，你也必須用＆引用父項。 '.item'裏面的'.item'不起作用。 –

您可以在純CSS中使用嵌套的CSS樣式。

您需要使用僞類:hover這樣的：

.item:hover .moreBtn { ... }  
.item:hover .pillBtn { ... } 
.item:hover { ... }

來源

2014-02-19 13:09:22

不能嵌套樣式純CSS。你可以做到這一點與預處理器類似SASS

你純 CSS可能類似於：

.item:hover .moreBtn { 
    position: relative; 
    font-size: 14px; 
    margin-right: 10px; 
    margin-top: 32px; 
} 
.item:hover .pillBtn { 
    -webkit-border-radius: 5px 5px 5px 5px; 
    border-radius: 5px 5px 5px 5px; 
    background:#7CDD97; 
    padding: 10.5px 40px 8.0px 40px; 
    color: #FFF; 
    font-weight: bold; 
    font-size: 20px; 
    text-decoration: none; 
} 
.item:hover { 
    background:#F3F3F3; 
    height: 70px; 
    -webkit-border-radius: 5px 5px 5px 5px; 
    border-radius: 5px 5px 5px 5px; 
}

只要.moreBtn和.pillBtn是後人的.item

JSFiddle

來源

2014-02-19 13:09:42 George

謝謝，還有8分鐘的時間來選擇正確的答案。其實我想要最大化的盒子版本，當用戶將鼠標放在整個盒子上時，會突出顯示「whatmore ..」。如果你能在這個方向做出有吸引力的事情，我感謝你的幫助。 –

風格取決於你，我不知道你想要的結果是什麼。 – George

您需要使用Transition：過渡效果對寬度本身TY，持續時間：2秒：

.item{ 
transition:width 2s; 
}

.item:hover{ 
height:200px; 
background-color:red; 
}

來源

2014-02-19 13:16:11 yashasvee

Onhover改變效果的CSS

回答

相關問題