4

だから私は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を使用してテストを行ってきたので、これが私のものです。

4

4 に答える 4

3

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/

于 2012-08-13T22:50:44.887 に答える
3

jQueryを使用すると、これは機能します。

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

他の非Webkitブラウザにもスタイルを適用する必要があります。

youreFiddleが機能しない理由がわかりません。コンソールから、関数が定義されていないと表示されます。

なぜあなたはこれをしようとしているのですか？必要がなければ、私はdefinteleyが上記のCSSの方法を提案します。

于 2012-08-13T22:59:39.390 に答える
1

jQueryを使用する必要はありません。バニラJSで問題ありません。正しいstyleプロパティ参照が欠落しているだけです。

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

作業サンプル（明らかにWebkitブラウザーが必要です）

:hover そうは言っても、実際には純粋なCSSを使用し、動的な疑似クラスに依存する必要があります。

#home {/*gradient 1*/}
#home:hover {/*gradient 2*/}
于 2012-08-13T23:39:09.787 に答える
0

純粋なCSSソリューションを受け入れますか？

もしそうなら、これを追加します：

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

</ p>

于 2012-08-13T22:48:43.120 に答える