CSS簡單的事情似乎並沒有工作

我有以下的CSS代碼：CSS簡單的事情似乎並沒有工作

.special { 
    height: 20px; 
    width: 125px; 
    border-bottom: 0px #69D2E7; 
    border-radius: 10px 10px 0px 0px; 
    background-color: #69D2E7; 
    text-align: center; 
    color: #FFFFFF; 
    font-family:"Arial Narrow",Arial,Helvetica,sans-serif; 
    font-size:10px; 
    font-weight:normal; 
    letter-spacing:1px; 
    opacity: 0.5; 
    transition-property: opacity; 
    transition-duration: 500ms; 
    text-transform: uppercase; 
    right: 0px; 
    position: fixed; 
    bottom: 0px; 
    z-index: 6969; 
} 

.special:hover { 
    tranisition: opacity 500ms, border-bottom 500ms; 
    opacity: 1.5; 
    border-bottom: 200px #69D2E7; 
}

我想使它所以鼠標懸停時，它變得更大（下邊框高度增加），和不透明度變化。不透明度與我擁有的元素一樣，但高度不會增加。我究竟做錯了什麼？ http://jsfiddle.net/7U3xn/

下面是一個看看它是如何工作的例子。

來源

2014-01-24 Cristian D

您需要添加border-style。例如，你可以使用solid：

UPDATED EXAMPLE HERE

.special:hover { 
    transition: opacity 500ms, border-bottom 500ms; 
    opacity: 1.5; 
    border-bottom: 200px solid #69D2E7; 
}

而且，固定錯字爲MarcB points out。它應該是transition而不是tranisition。

來源

2014-01-24 20:01:45

tranisition: opacity 500ms, border-bottom 500ms; 
    ^^---typo

CSS塊中的語法錯誤會終止其餘的css指令。如果您在Firefox中查看瀏覽器的開發者控制檯（例如shift-ctrl-J），您會看到CSS錯誤...

來源

2014-01-24 19:59:16

啊，很好，但仍然沒有解決問題。 –

CSS簡單的事情似乎並沒有工作

回答

相關問題