javascript - 在javascript中设置CSS渐变？

Question

所以我一直在尝试使用 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));";

}​

我一直在使用 jsFiddle 来测试东西，所以这是我的。

Answer 1

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

演示http://jsfiddle.net/enve/ZauwA/11/

---

要在鼠标悬停时更改文本，请使用此代码

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>

完整演示http://jsfiddle.net/enve/ZauwA/19/

Answer 2

使用 jQuery 可以：

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

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

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

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

Answer 3

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*/}

Answer 4

你愿意接受纯 CSS 解决方案吗？

如果是这样，请添加：

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

​</p>