Append string from array to div on mouseenter

Question

I have two buttons that change color when hovered over. They are both titled employer and employee. I have a Div below them that I want to change text accordingly when one is hovered. I dont want the text to be removed unless the other button is hovered over.

The color change works but it doesnt insert the text in the array. Is their something wrong with my syntax?

How can I achieve this?

Fiddle of what I have

JQUERY

    $(document).ready(function () {

        var pigText = new Array("Employee INFO", "Employer INFO");
        //Button Color Change
        $("#employerButton").mouseenter(function () {
            $("#employerButton").css("background-color", "#989898");
            $("#employeeButton").css("background-color", "#6EBE44");
            $("pigText[1]").appendTo("#pigTextHolder");
        });


        $("#employeeButton").mouseenter(function () {
            $("#employeeButton").css("background-color", "#989898");
            $("#employerButton").css("background-color", "#6EBE44");
            $("pigText[0]").appendTo("#pigTextHolder");
        });


    });

HTML

<div class="d1-d2 greenSideBar" id="leftGreenSideBar" >

</div>
<div class="d3-d6 m1" id="employerButton">
    <p>Employer</p>
</div>
<div class="d7-d10 m1" id="employeeButton">
    <p>Employees</p>
</div>
<div class="d11-d12 greenSideBar" id="rightGreenSideBar">

</div>

<!--BREAK-->  
<div class="d-all m1" id="coingBackground">
    <h2>Welcome to Payday</h2>
    <img src="images/the_pig_payday.png" alt="The Pig" />
    <div id="pigTextHolder">
        <p>Just some random crap about a boy... and his pet pig. Dont let it frighten you. Babes cousin isnt out for revenge. Just closure. BLAH BLAH BLAH BLAH </p>
    </div>
</div>

Answer 1

You are using quotes around the expressions that accesses the array, so they are not interpreted as expressions, but as strings.

Also, you probably want to replace the text in the element, not add more text:

$("#pigTextHolder").text(pigText[1]);

Demo: http://jsfiddle.net/Guffa/paeM3/2/

Answer 2

You want to change:

$("pigText[1]").appendTo("#pigTextHolder");

To:

$("#pigTextHolder").html( $("#pigTextHolder").html() + $(pigText[1]));

Or:

$("#pigTextHolder").append(pigText[1]);

Answer 3

You can use .append() here:

$("#pigTextHolder").append(pigText[1]);
$("#pigTextHolder").append(pigText[0]);

Answer 4

use

$("#pigTextHolder").html(pigText[1]);

and

$("#pigTextHolder").html(pigText[0]);

respectively