从 jQuery 显示 div 时，我的 css 悬停不起作用。 z 索引冲突？

Question

我不确定我是否按照正确的顺序做事，但这是我的问题。 我展示了来自 jQuery 的五个按钮。但我无法在 css 中使用:hover。

http://jsfiddle.net/alexnode/esGRR/

<div id="start"></div>
<div class="buttoncontainer">
    <div class="translatebuttons" id="tr1"></div>
    <div class="translatebuttons" id="tr2"></div>
    <div class="translatebuttons" id="tr3"></div>
    <div class="translatebuttons" id="tr4"></div>
    <div class="translatebuttons" id="tr5"></div>
</div>

我的 CSS

.buttoncontainer {
    display: none;
    z-index: 1;
    width: 10%;
    height: 50%;
    background: green;
    opacity:0.4;
    color: white;
    left: 35%;
    top: 25%;
    position: fixed;
    alignment-adjust: middle;
    text-align: center;
}
.translatebuttons {
    display: none;
    width: 100%;
    height: 20%;
    color: white;
    z-index: 2300;
    cursor: pointer;
    text-align: center;
    font-size: smaller;
    opacity: 0.7;
}
#tr1 {
    display: none;
    position: static;
    background: blue;
    font-size: smaller;
    z-index: 3000;
}
#tr1 :hover {
    background: red;
}

和我的 JavaScript

$(document).ready(function () {
    $("#start").text("let's start");
    $("#start").click(function () {
        start();
    });

});

function start() {
    $(".translatebutton").show();

    $("#tr1").show();
    $("#tr2").show();
    $("#tr3").show();
    $("#tr4").show();
    $("#tr5").show();
    $("#tr1").text("French to German");
    $("#tr2").text("French to English");
    $("#tr3").text("French to Italian");
    $("#tr4").text("French to Turkish");
    $("#tr5").text("French to Romanian");
    $(".buttoncontainer").show();
}

有什么想法吗？

Answer 1

你有一个小的语法错误：

#tr1 :hover

应该是：

#tr1:hover