JavaScript での onmouseover および onmouseout イベントの例

目次

JavaScriptイベント

onmouseover イベント

onmouseout イベント:

onmouseover イベントと onmouseout イベントを組み合わせた場合:

HTML 部分

css部分

JavaScript部分

最終効果:

---

JavaScriptイベント

イベントは、ブラウザ アクションまたはユーザー アクションです。

Web ページのすべての要素は、JavaScript 関数をトリガーできる特定のイベントを生成できます。たとえば、ユーザーがボタンをクリックしたときに関数をトリガーする onClick イベントを生成できます。イベントは HTML ページで定義されます。

JavaScript には、次のようなさまざまな種類のイベントがあります。

1. ボタンクリックイベント。

2. 写真の上にマウスを置くと、特別な効果があります。

3.マウスが画像から離れると、効果が消えます。

4. キーボードのキーを使用すると、エフェクトが表示されます。

5. 待って...

onmouseover イベント

onmouseover イベント: マウスが特定の HTML タグ上を移動したときに表示される効果を参照します。

例えば：

var p = document.getElementById("p")  /*获取id名字为p的标签*/
/* 给获取到的id添加事件 */
p.onmouseover = function (){
    alert("鼠标已经移动上来！");
}

 

onmouseoutイベント

onmouseout イベント: マウスがポイントされた HTML タグから移動した後に表示される効果を参照します。

例えば：

var p = document.getElementById("p")  /*获取id名字为p的标签*/
/* 给获取到的id添加事件 */
p.onmouseout = function (){
    alert("鼠标已经移出！");
}

onmouseover イベントと onmouseout イベントを組み合わせた場合:

HTML 部分

<!-- 按钮 -->
    <label id="info">
        <input type="checkbox" />免登录十天
    </label>
<!-- 弹框 -->
    <div class="div_dis">
        请注意在安全模式下，单击按钮，请勿在网吧或公共场所使用免登录十天
    </div>

css部分

*{
    margin:0;
    padding:0;
}

.div_dis{
    padding: 10px 10px;
    width: 200px;
    height: 60px;
    border: 1px #f00 solid;
    background: yellow;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 120px;
    display: none;
}

JavaScript部分

/* 找元素---找对象 */
    var oInp = document.getElementById("info");
    var oDiv = document.getElementsByClassName("div_dis")[0];
/* 操作元素---搞对象  */
    /* 鼠标一上去之后 */
    oInp.onmouseover = function (){
        oDiv.style.display = "block";
        oInp.style.cursor = "pointer";
    }

    /* 鼠标移出之后 */			
    oInp.onmouseout = function (){
        oDiv.style.display = "none";
    }

最終効果:

オンマウスオーバー

オンマウスアウト