在javascript中设置CSS渐变？

所以我一直在尝试用javascript设置一个渐变，这样它就有了鼠标悬停的效果，但是我运气不好，无法让它工作，这是我的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));";

}​

---

我一直在使用JSFIDLE进行测试，我也是这样做的。

您愿意接受纯CSS解决方案吗

如果是，请添加以下内容：

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

---

​

试试这样的想法，只使用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;
}

演示

---

要更改鼠标上的文本，请使用以下代码

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>

​
函数changeText（）
{
document.getElementById（“homenav”）.innerHTML='Welcome'
}
函数returnText（）
{
document.getElementById（“homenav”）.innerHTML='Home'
}

---

使用jQuery进行完整演示此功能：

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

您还需要为其他非webkit浏览器应用这些样式

不知道你为什么小提琴不起作用。控制台告诉我您的函数没有定义

---

你为什么要这么做？如果没有必要，我会明确建议上面提到的CSS方式。

无需使用jQuery，vanilla JS就可以了。您只是缺少正确的

样式

属性引用：

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

（显然需要webkit浏览器）

也就是说，您应该真正使用纯CSS并依赖于

：hover

：

---

如果你想改变鼠标悬停的风格，试着使用CSS

：hover

pseudo类，然后在那里添加渐变背景Tamlyn，我也打算让它改变文本，但我已经用javascript实现了这一点，那么文本和渐变应该分开完成吗？我还建议你使用CSS:hover，并且只有在必要的时候（并且只有那时）才使用它在这种情况下使用jQuery1.8，因为它为不同的浏览器添加了前缀，而css3特性则是1.8；）@GeorgeSumpster总是在可能的情况下使用CSS，因为您可以使用浏览器GPU渲染。它比DOM操作快得多你可能还应该用JS提供一个解决方案来回答OP。坦白说，我甚至不知道问题出在哪里。显然，他接受了Enve的纯CSS回答，所以事实并非如此。是的，我不知道CSS是最好的选择，谢谢你，Rodnik。我还打算更改文本，但是我想把它们分开也行。我需要弄清楚我的函数是如何定义的，我一直对它们有问题。v.vIt看起来你必须在调用函数之前声明它们。您可以将它们添加到标题中的-Tag中。+1、+1是正确的解决方案！我不确定backgroundImage的JavaScript语法是否正确，因为我忘记了使用jQuery时的大部分语法：P

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