CSS3 nav-down 属性

规定在使用方向键时向何处导航：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    button {
      position: absolute;
    }

    button#b1 {
      top: 20%;
      left: 25%;
      nav-index: 1;
      nav-right: #b2;
      nav-left: #b4;
      nav-down: #b2;
      nav-up: #b4;
    }

    button#b2 {
      top: 40%;
      left: 50%;
      nav-index: 2;
      nav-right: #b3;
      nav-left: #b1;
      nav-down: #b3;
      nav-up: #b1;
    }

    button#b3 {
      top: 70%;
      left: 25%;
      nav-index: 3;
      nav-right: #b4;
      nav-left: #b2;
      nav-down: #b4;
      nav-up: #b2;
    }

    button#b4 {
      top: 40%;
      left: 0%;
      nav-index: 4;
      nav-right: #b1;
      nav-left: #b3;
      nav-down: #b1;
      nav-up: #b3;
    }
  </style>
</head>
<body>

  <button id="b1">按钮1</button>
  <button id="b2">按钮2</button>
  <button id="b3">按钮3</button>
  <button id="b4">按钮4</button>

  <p><b>注释：</b>目前只有 Opera 支持 nav-* 属性。当您使用方向键导航时，请同时按下 Shift 键。</p>

</body>
</html>

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
nav-down 不兼容 不兼容 不兼容 不兼容 Supported in Opera 11.5-12.
不兼容于更新版本的浏览器

属性定义及使用说明

nav-down 属性规定当使用 nav-down 导航键时，向何处进行导航。

默认值： auto
继承： no
版本： CSS3
JavaScript 语法： object.style.navDown="#div2"

语法

nav-down: auto|id|target-name|inherit;

值 说明
auto 浏览器决定导航到哪个元素。
id 规定被导航元素的 id。
target-name 规定被导航的目标框架。
inherit 规定应从父元素继承 nav-down 属性的值。