Quelle hover-002.html

Sprache: HTML

products/Sources/formale Sprachen/C/Firefox/testing/web-platform/tests/css/selectors/hover-002.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>Selectors: Change class to enable :hover</title>
<link rel="author" title="Rune Lillesveen" href="futhark@chromium.org">
<link rel="help" href="https://drafts.csswg.org/selectors/#the-hover-pseudo">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<style>
  .affected:hover { color: green }
  #hoveredContents { display: contents }
</style>
<div id="hovered">Hover me - should become green</div>
<div id="hoveredContents">
  <div id="hovered2">Hover me - should become green</div>
</div>
<script>
  function mouseMoveToTarget(selector) {
     let target = document.querySelector(selector);
     return new test_driver.Actions().pointerMove(0, 0, {origin: target})
             .send();
  }

  function testElementGreen(test, element) {
    element.addEventListener("mouseover", test.step_func(event => {
      assert_equals(getComputedStyle(element).color, "rgb(0, 128, 0)");
      test.done();
    }));
  }

  // Setting the affected classes here makes the two elements go from never
  // reacting to hover to being affected by hover without changing computed
  // style.
  hovered.offsetTop;
  hovered.className = "affected";
  hoveredContents.className = "affected";

  async_test(t => { testElementGreen(t, hovered); }, "Hover #hovered element should make it go green");
  async_test(t => { testElementGreen(t, hovered2); }, "Hover #hoveredContents child should make it go green");

  mouseMoveToTarget("#hovered").then(() => {
    mouseMoveToTarget("#hovered2");
  });

</script>

Messung V0.5 in Prozent

¤ Dauer der Verarbeitung: 0.19 Sekunden (vorverarbeitet am 2026-06-04) ¤

Wurzel

Suchen

PVS Prover

Isabelle Prover

NIST Cobol Testsuite

Cephes Mathematical Library

Vienna Development Method

Haftungshinweis

Die Informationen auf dieser Webseite wurden nach bestem Wissen sorgfältig zusammengestellt. Es wird jedoch weder Vollständigkeit, noch Richtigkeit, noch Qualität der bereit gestellten Informationen zugesichert.

Bemerkung:

Die farbliche Syntaxdarstellung und die Messung sind noch experimentell.