0

styleJavaScript を使用して、以下をbodyHTML または別のdivに適用したいと考えていますmouseover。そしてリバースオンmouseout。可能であれば両方ともフェード付きですか？

スタイル：

.box-style_img2 {
    background-image: url(img.png);
    background-size: auto;
    background-repeat: repeat;
    background-attachment: scroll;
    background-color: #00a0b0;
}

前もって感謝します。PS Javascriptを学び始めたばかりです。

4

2 に答える 2

1

Javascript を避けることができる場合は、常に CSS で行うことをお勧めします。

:hovercssのプロパティを使ってみてください。アニメーション用transitionプロパティ

<div class="box-style_img2">    
</div>

.box-style_img2 {
    background-size: auto;
    height: 100px;
    width: 100px;
    background-repeat: repeat;
    background-attachment: scroll;
    background-color: #00a0b0;
    transition: all 1s ease;
}
.box-style_img2:hover {
    background-size: auto;
    height: 100px;
    width: 100px;
    background-repeat: repeat;
    background-attachment: scroll;
    background-color: #000000;
    transition: all 1s ease;
}

また、このフィドルを確認できます

于 2013-08-29T12:04:48.417 に答える
0 
function on_mouseover(){
document.body.className += "your-class-to be applied";//for body
or
document.getElementById("div-id").className ="your-class-to be applied"
}

function on_mouseout(){
document.body.className += "your-initial-css-class";//for body
or
document.getElementById("div-id").className ="your-initial-css-class";
}

あなたの HTML:

<div id="div-id" onmouseover="on_mouseover()" onmouseout="on_mouseout()"></div>

または、javascriptをインラインで書きたくない場合は、addEventListenerを使用できます

document.getElementById('your-id').addEventListener("mouseover",on_mouseover);
document.getElementById('your-id').addEventListener("mouseout",on_mouseout);

注: このタスクは、プレーン css を使用して実行することもできます。

.your-class{
//properties to be applied on mouseout
}
.your-class:hover{
//properties to be applied on mouseover
}
于 2013-08-29T12:08:40.987 に答える