CODEWITHSUNDEEP
jquerycssbuttonhoverz-index
alexnode
alexnode

Reputation: 117

My css hover doesn't work when showing divs from jQuery. z-index conflict?

I am not sure if I am doing things in the right order but here is my problem. I show five buttons from jQuery. But I can't manage to use :hover in css.

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>

my 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;
}

and my 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();
}

Any ideas what is going on?

Upvotes: 0

Views: 230

Answers (1)

Matthew Blancarte
Matthew Blancarte

Reputation: 8301

You have a small syntax error:

#tr1 :hover

Should be:

#tr1:hover

Upvotes: 3

Related Questions