so I've been trying to set a gradient with javascript so that it has a mouse over effect, but I've had no luck and cannot get it to work, here is my javascript.

function mouseOVER(x)
{
x.backgroundImage="-webkit-gradient(linear, left bottom, left top, color-stop(0, #F7F7F7), color-stop(1, #FFFFFF));";
}

function mouseOFF(x)
{
x.backgroundImage="-webkit-gradient(linear, left bottom, left top, color-stop(0, #F7F7F7), color-stop(1, #BABABA));";

}​

I've been using jsFiddle to test things, so here is mine for this.

so I've been trying to set a gradient with javascript so that it has a mouse over effect, but I've had no luck and cannot get it to work, here is my javascript.

function mouseOVER(x)
{
x.backgroundImage="-webkit-gradient(linear, left bottom, left top, color-stop(0, #F7F7F7), color-stop(1, #FFFFFF));";
}

function mouseOFF(x)
{
x.backgroundImage="-webkit-gradient(linear, left bottom, left top, color-stop(0, #F7F7F7), color-stop(1, #BABABA));";

}​

I've been using jsFiddle to test things, so here is mine for this.

• javascript
• jquery
• html
• css

• 7 If you want mouseOver style change, try to use CSS :hover pseudoclass and there add gradient background – Setthase Commented Aug 13, 2012 at 22:46
• Tamlyn, I also intended for it to change the text, but I've made that work in javascript, so should the text and gradient be done separately? – George Sumpster Commented Aug 13, 2012 at 22:48
• i'd also suggest you to use css :hover and only if it is necessary (and only then) use jquery 1.8 for that case because it adds prefixes for different browsers since 1.8 for css3 features ;) – r3bel Commented Aug 13, 2012 at 22:49
• 1 @GeorgeSumpster Use CSS always when posible, bacause you can have adventages of browser GPU rendering. It much faster than DOM manipulating – Setthase Commented Aug 13, 2012 at 22:50

4 Answers 4

Try somethink like this, with CSS only

CSS

#home{
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #F7F7F7), color-stop(1, #BABABA));
    width:100px;
    height:45px;
    text-align:center;
    border-radius:10px;
    position:relative;
    top:15px;
    left:15px;
}
#home:hover{
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #F7F7F7), color-stop(1, #FFFFFF));
}
#homenav{
    font-family:Arial, Helvetica, sans-serif;
    text-decoration: none;
    color:#000000;
    position:relative;
    top:12.5px;
}

DEMO http://jsfiddle/enve/ZauwA/11/

To change your text on mouseover use this code

HTML

<nav>
    <div id="home">
    <a href="home.html" id="homenav" onmouseover="changeText()" onmouseout="returnText()">HOME</a>
    </div>
</nav>​

<script>
function changeText()
{
document.getElementById("homenav").innerHTML='Wele'
}
function returnText()
{
document.getElementById("homenav").innerHTML='Home'
}
</script>

FULL DEMO http://jsfiddle/enve/ZauwA/19/

With jQuery this works:

$('#block').css({
    background: "-webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000))" 
});

You also need to apply the styles for other non-webkit browsers.

Dont know why youre Fiddle doesnt work. The Console tells me that youre functions are not defined.

Why are you trying to do this? If not necessary i would definteley suggest the CSS-way mentioned above.

No need to use jQuery, vanilla JS is fine. You're simply missing a correct style property reference:

x.backgroundImage='...'; //no such property
x.style.backgroundImage='...'; //works correctly

Working sample (requires a webkit browser obviously)

That being said, you should really use pure CSS and rely on :hover dynamic pseudo-class:

#home {/*gradient 1*/}
#home:hover {/*gradient 2*/}

Would you be open for a pure CSS solution?

if so, add this:

#homenav:hover{
    -webkit-gradient(linear, left bottom, left top, color-stop(0, #F7F7F7), color-stop(1, #FFFFFF));
}

​