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来测试事物，所以here是我的。

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;
}

DEMO 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浏览器应用这些样式。

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

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

Answer 3

不需要使用jQuery，vanilla JS很好。您只是错过了正确的style属性引用：

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

Working sample（显然需要webkit浏览器）

话虽如此，你应该真正使用纯CSS并依赖: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));
}

在javascript中设置CSS渐变？

4 个答案: