CODEWITHSUNDEEP
javascriptjqueryhtmlcss
blackhawk338
blackhawk338

Reputation: 386

Javascript change colour of divs, and then colour of the div's focus

I am making a html forum and am using javascript to change the colour of the forum, I have three divs, one is blue, green and red.

When each div is clicked, the javascript will change the colour of the elements.

I would like to change the colour of the submit button's focus with the .css() function in javascript, but the focus part doesn't work.

Here is my javascript code:

$("#green").click(function() {
    $(".mailheader").css("background","#a3d300");
    $(".submit").css("background","#a3d300");
    $(".submit:focus").css("background","#98cf00");
});
$("#blue").click(function() {
    $(".mailheader").css("background","#00b4ff");
    $(".submit").css("background","#00b4ff");
    $(".submit:focus").css("background","#04a6e9");
});
$("#red").click(function() {
    $(".mailheader").css("background","#ff0000");
    $(".submit").css("background","#ff0000");
    $(".submit:focus").css("background","#ea0202");
});

So I have tried $(".submit:focus").css("background","#ea0202"); for chaning the background of the focus, but it doesn't work. anyone know how to fix this? thanks

Upvotes: 0

Views: 693

Answers (3)

Santy
Santy

Reputation: 312

Check this

DEMO

HTML

<div class="mailheader"></div>
<div id="green"></div>
<div id="blue"></div>
<div id="red"></div>
<input type="button" value="submit" class="submit" />

CSS

#green, #red, #blue {
    height:50px;
    width:100px;
}
#green {
    background-color:green;
}
#red {
    background-color:red;
}
#blue {
    background-color:blue;
}

jQuery

$("#green").click(function () {
    $(".mailheader").css("background", "#a3d300");
    $(".submit").css("background", "#a3d300");
    $(".submit").focus(function () {
        $(".submit").css("background", "#04a6e9");
    })
});
$("#blue").click(function () {
    $(".mailheader").css("background", "#00b4ff");
    $(".submit").css("background", "#00b4ff");
    $(".submit").focus(function () {
        $(".submit").css("background", "#ea0202");
    })
});
$("#red").click(function () {
    $(".mailheader").css("background", "#ff0000");
    $(".submit").css("background", "#ff0000");
    $(".submit").focus(function () {
        $(".submit").css("background", "#98cf00");
    })
});

Upvotes: 2

Daniel Cheung
Daniel Cheung

Reputation: 4829

jQuery can't change pseudo-elements' style

Fix (I used the .html() function for the :focus's style, using a <style> tag in the body or elsewhere):

<script>
    ...
    $(".submit").css("background","#ff0000");
    $("body style.changeColor").html("
        .submit:focus {background: #ea0202};
    ");
    ...
</script>
<body>
    <style class="changeColor">
    </style>
</body>

And I were you, I rather change all other .css() functions into text inside the .html() string.

$("body style.changeColor").html("
    ...
    .submit {background: #ff0000};
    .submit:focus {background: #ea0202};
");

Upvotes: 1

Thor
Thor

Reputation: 291

You are setting styles directly on the element. Why not set a css class on the elements and handle all the changes via css. That is much cleaner and easier to use.

eg. when '#green' is clicked add a class 'Green' to the submit button. (see http://api.jquery.com/addClass/ ) (be sure to remove the other classes)

Then in css you can set #MySubmitButton.Green{.. your green styles..} and use all the pseudo css classes you like. Things like #MySubmitButton.Green:hover {color:#FF00FF;}

Hope this helps...

Upvotes: 1

Related Questions