Question

我有以下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/

以下是一个示例，了解它的工作原理。

Answer 1

您需要添加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。

Answer 2

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

CSS块中的语法错误会杀死其余的css指令，而不是错误。如果你在Firefox中查看浏览器的开发者控制台（例如shift-ctrl-J），你会看到CSS错误......

CSS Simple Thing似乎不起作用

2 个答案: