Javascript, change a link color when mouse is over it, only after I click a button

Question

I have an assignment to do (so there is rules regarding css use and jquery etc).

edit: I need to do it entirely through javascript, I can't use css or jquery, sorry for not being more specific (although i'm sure the css and jquery answers will be useful to others!

Basically when I click a button I want my javascript to become active.

one of the features I want is that when my mouse is over a link it changes colour, and when it is no longer on the link it it goes back to the prior colour. I know how I would generally do this with "onmouseover""onmouseout". but I don't know how to do this so it only happens after I click a button

function linkA()
{
    setInterval(changeImage, 3000);
    changeLink();
}

this is some of the code that activates when the button is pressed it then activates the function change link

function changeLink()
{
    var x = document.getElementById('sidebar').getElementsByTagName('a');
    for(var i = 0; i<x.length; i++)
    {
         x[i].style.color = "blue";
    }
}

this is to change the link colours to blue, then i was thinking of using something like

`x.onmouseover = x.style.color="green";
 x.onmouseout = x.style.color='blue';`

to change the colour when i have the mouse over it, but I'm not even sure if that is valid code or if could work, any help is much appreciated!

This is the piece of html i wish to edit, there is more than three links on the rest of the page outside the div tag i just want to alter these three however

<div id="sidebar">
                <div>
                    <h3>Recent Articles</h3>
                    <ul>
                        <li>
                            <a href="article.html">Why the bird is a natural replacement for the bee</a>
                        </li>
                        <li>
                            <a href="article.html">stone work in your garden, the new trend</a>
                        </li>
                        <li>
                            <a href="article.html">Urban family turns garden into eco farm</a>
                        </li>
                        <li>
                            <a href="article.html">sheep as your lawn mower! revolutionary eco gardening</a>
                        </li>
                    </ul>
                </div>

Answer 1

If I understand correctly, you want the link only to change colors AFTER you press a button. To do this, you could use a boolean. Something like

var clicked = false;
var onButtonClick = function() { clicked = !clicked; }
x.onmouseover = function () {
    x.style.color = clicked ? 'green' : 'blue'
}
x.onmouseout = function () {
    x.style.color = 'blue'
}