Question

我在Vue.js开发了一个简单的Tic-Tac-Toe游戏。我使用table制作网格并使用td:empty:hover { cursor: pointer }使表格单元格显示为基于光标的输入设备（即鼠标，轨迹球）的可点击元素。

这最初起作用，但是在开始新游戏时，在之前的游戏中点击的任何单元格似乎都没有“清空”＃34;这样td:empty:hover选择器不会应用cursor: pointer。

如果我打开Chrome的DevTools并通过强制元素状态手动应用:hover伪类，则会恢复CSS指针功能。

我觉得这可能是Chrome中的一个错误，因为Safari或Firefox中没有这个问题，但我不确定是否有人可能知道我不知道的事情。< / p>

有关复制的说明，请参阅下文。

＆＃13;

var TicTacToe = new Vue({
  name: 'tictactoe',
  el: '#tictactoe',
  computed: {
    availableMoves () {
      var i = 0
      for (var r = 0; r < 3; r++) {
        for (var c = 0; c < 3; c++) {
          if (!this.grid[r][c]) {
            i++
          }
        }
      }
      return i
    },
    message () {
      if (this.winner) return (this.winner === -1) ? 'Tie game!' : this.winner + ' won!'
      if (this.currentPlayer) return this.currentPlayer + '\'s turn.'
      return 'X goes first.'
    }
  },
  data () {
    return {
      currentPlayer: null,
      winner: null,
      grid: [
        [0, 0, 0],
        [0, 0, 0],
        [0, 0, 0]
      ]
    }
  },
  methods: {
    checkForWinner () {
      // Check rows
      for (var r = 0; r < 3; r++) {
        if (!this.grid[r][0] || !this.grid[r][1] || !this.grid[r][1]) continue

        if (this.grid[r][0] === this.grid[r][1] && this.grid[r][1] === this.grid[r][2]) {
          this.winner = this.grid[r][0]
          return true
        }
      }

      // Check columns
      for (var c = 0; c < 3; c++) {
        if (!this.grid[0][c] || !this.grid[1][c] || !this.grid[1][c]) continue

        if (this.grid[0][c] === this.grid[1][c] && this.grid[1][c] === this.grid[2][c]) {
          this.winner = this.grid[0][c]
          return true
        }
      }

      // Check diagonals
      if (this.grid[0][0] && this.grid[1][1] && this.grid[2][2]) {
        if (this.grid[0][0] === this.grid[1][1] && this.grid[1][1] === this.grid[2][2]) {
          this.winner = this.grid[1][1]
          return true
        }
      } else if (this.grid[0][2] && this.grid[1][1] && this.grid[2][0]) {
        if (this.grid[0][2] === this.grid[1][1] && this.grid[1][1] === this.grid[2][0]) {
          this.winner = this.grid[1][1]
          return true
        }
      }

      // Tie Game
      if (this.availableMoves === 0) {
        this.winner = -1
        this.currentPlayer = null
        return true
      }

      return false
    },
    clickedCell (r, c) {
      if (this.winner || this.grid[r][c]) return

      this.grid[r][c] = this.currentPlayer || 'X'
      this.grid.splice(r, 1, this.grid[r])

      if (!this.checkForWinner()) {
        this.currentPlayer = (this.currentPlayer === 'O') ? 'X' : 'O'
      }
    },
    clickedNewGame () {
      this.currentPlayer = null
      this.winner = null
      this.grid = [
        [0, 0, 0],
        [0, 0, 0],
        [0, 0, 0]
      ]
      this.grid.splice(0, 1, this.grid[0])
    }
  }
});

＆＃13;

* { cursor: default }
body { font-family: Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding-bottom: 100px; text-align: center }
h1 { font-weight: 400 }
h2 { font-weight: 300 }
button { background: none; border: none; display: inline-block; cursor: pointer; font-size: 22pt; padding: 0.25em }
button:hover { color: blue; }
#grid { border-collapse: collapse; font-size: 33pt; font-weight: 400; margin: 50pt auto }
#grid td { border: 3pt solid black; cursor: default; height: 50pt; padding: 0; width: 50pt }
#grid td:empty:hover { cursor: pointer }
#grid td:first-child { border-left: none }
#grid td:last-child { border-right: none }
#grid tr:first-child td { border-top: none }
#grid tr:last-child td { border-bottom: none }

＆＃13;

<script src="https://unpkg.com/vue@2.5.2/dist/vue.js"></script>
<div id="tictactoe">
    <h1>Tic-Tac-Toe</h1>
    <h2>{{ message }}</h2>
    <table id="grid">
      <tr v-for="r in [0, 1, 2]">
        <td v-for="c in [0, 1, 2]"
            @click="clickedCell(r, c)">{{ grid[r][c] || '' }}</td>
      </tr>
    </table>
    
    <button type="button"
            @click="clickedNewGame()">
      New Game
    </button>
  </div>

＆＃13;

复制说明：

在Chrome中，单击一个单元格（例如，左下角的单元格）以在该位置开始一个X游戏。
点击新游戏按钮。
使用光标悬停在先前选择的单元格上，注意光标不会更改为pointer光标（手指指针图标，而不是箭头指针图标）。
< / LI>
注意：我正在为macOS Sierra 10.12.6运行Google Chrome版本62.0.3202.62（官方版本）（64位）

Answer 1

不想带走任何应有的信用，@ BT - 但由于我懒得更新我的Chromium来重现这个问题，我已经开始问你们，如果你改变伪类，问题是否仍然存在顺序。

但你也可以开始使用#grid td:empty { cursor: pointer } - 或者游标实际适用的其他元素状态有多少： - ）

对于我来说，这只是一般性的个人偏好 - 我尽可能多地投入“正常”元素状态，:hover只添加对该状态至关重要的内容。即使对于我只在悬停上显示的元素（例如子菜单项），我倾向于保持所有位置：绝对，边距/填充等处于正常状态（例如，{{ 1}}），仅在ul > li > ul中切换显示为阻止。但是考虑到这一点，我想这部分源于旧的预先“浏览器开发工具”时代，你不能只是“切换”悬停，但必须让元素可见，以便在第一时间正确调整样式，哈。

`：empty：hover`没有更新

1 个答案: