diff options
Diffstat (limited to 'files/ja/web/api/element/mouseover_event/index.md')
| -rw-r--r-- | files/ja/web/api/element/mouseover_event/index.md | 144 |
1 files changed, 65 insertions, 79 deletions
diff --git a/files/ja/web/api/element/mouseover_event/index.md b/files/ja/web/api/element/mouseover_event/index.md index d6354496f4..18c4118699 100644 --- a/files/ja/web/api/element/mouseover_event/index.md +++ b/files/ja/web/api/element/mouseover_event/index.md @@ -5,58 +5,62 @@ tags: - API - Cursor - DOM - - Event - - Interface + - イベント + - インターフェイス - MouseEvent - - Reference - - events - - mouse + - リファレンス + - マウス - mouseover - move - - pointer + - ポインター +browser-compat: api.Element.mouseover_event translation_of: Web/API/Element/mouseover_event --- -<div>{{APIRef}}</div> +{{APIRef}} -<p><span class="seoSummary"><strong><code>mouseover</code></strong> イベントは {{domxref("Element")}} において、ポインティングデバイス (マウスやトラックパッドなど) のカーソルが要素またはその子要素のうちの一つの上を移動したときに発生します。</span></p> +**`mouseover`** イベントは {{domxref("Element")}} において、ポインティングデバイス (マウスやトラックパッドなど) のカーソルが要素またはその子要素のうちの一つの上を移動したときに発生します。 <table class="properties"> - <tbody> - <tr> - <th scope="row">バブリング</th> - <td>あり</td> - </tr> - <tr> - <th scope="row">キャンセル</th> - <td>可</td> - </tr> - <tr> - <th scope="row">インターフェイス</th> - <td>{{domxref("MouseEvent")}}</td> - </tr> - <tr> - <th scope="row">イベントハンドラープロパティ</th> - <td>{{domxref("GlobalEventHandlers.onmouseover", "onmouseover")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>あり</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("MouseEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td> + {{domxref("GlobalEventHandlers.onmouseover", "onmouseover")}} + </td> + </tr> + </tbody> </table> -<h2 id="Examples" name="Examples">例</h2> +<h2 id="Examples">例</h2> -<p>以下の例は、 <code>mouseover</code> と {{domxref("Element/mouseenter_event", "mouseenter")}} の各イベントの違いを説明しています。</p> +以下の例は、`mouseover` と {{domxref("Element/mouseenter_event", "mouseenter")}} の各イベントの違いを説明しています。 -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html notranslate"><ul id="test"> - <li>item 1</li> - <li>item 2</li> - <li>item 3</li> -</ul> -</pre> +```html +<ul id="test"> + <li>item 1</li> + <li>item 2</li> + <li>item 3</li> +</ul> +``` -<h3 id="JavaScript">JavaScript</h3> +### JavaScript -<pre class="brush: js notranslate">let test = document.getElementById("test"); +```js +let test = document.getElementById("test"); // このハンドラーは、カーソルが順序なしリストの上を移動した // ときに1度だけ実行されます @@ -80,49 +84,31 @@ test.addEventListener("mouseover", function( event ) { setTimeout(function() { event.target.style.color = ""; }, 500); -}, false);</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample('Examples')}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - </tr> - </thead> - <thead> - <tr> - <td>{{SpecName('UI Events', '#event-type-mouseover', 'mouseover')}}</td> - <td>{{Spec2('UI Events')}}</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Events', '#event-type-mouseover', 'mouseover')}}</td> - <td>{{Spec2('DOM3 Events')}}</td> - </tr> - </thead> -</table> +}, false); +``` -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +### 結果 -<p>{{Compat("api.Element.mouseover_event")}}</p> +{{EmbedLiveSample('Examples')}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 仕様書 -<ul> - <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントの紹介</a></li> - <li>{{domxref("Element/mousedown_event", "mousedown")}}</li> - <li>{{domxref("Element/mouseup_event", "mouseup")}}</li> - <li>{{domxref("Element/mousemove_event", "mousemove")}}</li> - <li>{{domxref("Element/click_event", "click")}}</li> - <li>{{domxref("Element/dblclick_event", "dblclick")}}</li> - <li>{{domxref("Element/mouseover_event", "mouseover")}}</li> - <li>{{domxref("Element/mouseout_event", "mouseout")}}</li> - <li>{{domxref("Element/mouseenter_event", "mouseenter")}}</li> - <li>{{domxref("Element/mouseleave_event", "mouseleave")}}</li> - <li>{{domxref("Element/contextmenu_event", "contextmenu")}}</li> -</ul> +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [イベントの紹介](/ja/docs/Learn/JavaScript/Building_blocks/Events) +- {{domxref("Element/mousedown_event", "mousedown")}} +- {{domxref("Element/mouseup_event", "mouseup")}} +- {{domxref("Element/mousemove_event", "mousemove")}} +- {{domxref("Element/click_event", "click")}} +- {{domxref("Element/dblclick_event", "dblclick")}} +- {{domxref("Element/mouseover_event", "mouseover")}} +- {{domxref("Element/mouseout_event", "mouseout")}} +- {{domxref("Element/mouseenter_event", "mouseenter")}} +- {{domxref("Element/mouseleave_event", "mouseleave")}} +- {{domxref("Element/contextmenu_event", "contextmenu")}} |