CSS3 nav-left 属性

指定导航使用向左箭头和右箭头导航键：

<!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-right 不兼容 不兼容 不兼容 不兼容 Supported in Opera 11.5-12.
不兼容于更新版本的浏览器

属性定义及使用说明

nav-left的属性指定使用箭头向左导航键导航。

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

语法

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

值 说明
auto 浏览器将决定哪个元素导航
id 指定导航到该元素的ID
target-name 指定导航到目标帧
inherit 指定nav-left属性的值，应该从父元素继承