CSS gradient setup in javascript?

Question

so I'm trying to set the gradient using javascript so that it has an effect on the mouse, but I'm out of luck and can't make it 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 used jsFiddle to test things, so here is for me.

Answer 1

Try something similar, only with CSS

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.net/enve/ZauwA/11/

---

To change text on hover, 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='Welcome' } function returnText() { document.getElementById("homenav").innerHTML='Home' } </script> 

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

Answer 2

With jQuery, this works:

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

You also need to apply styles for browsers other than websites.

Not sure why youre fiddle not working. The console tells me that youre functions are not defined.

Why are you trying to do this? If this is not necessary, I would suggest using the CSS path mentioned above.

Answer 3

No need to use jQuery, vanilla JS in order. You simply did not specify the correct style property link:

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

Working example (requires a web browser browser)

In doing so, you should really use pure CSS and rely on :hover dynamic pseudo-class :

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

Answer 4

Would you be open to a pure CSS solution?

if yes add this:

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