在javascript中设置CSS渐变？ [英] Setting a CSS gradient in javascript?

问题描述

所以我一直在试图设置一个渐变与javascript，以便它有鼠标的效果，但我没有运气，不能得到它的工作，这里是我的javascript。

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));";

}​

我一直在使用jsFiddle测试东西， 这里是我的这个。

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

推荐答案

尝试这样的东西，只有CSS

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.net/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='Welcome'
}
function returnText()
{
document.getElementById("homenav").innerHTML='Home'
}
</script>

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

这篇关于在javascript中设置CSS渐变？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！