你的代碼帶class=tr的是上面的吧 你加個(gè)判斷，如果鼠標(biāo)在class=tr上，下面的也加懸停效果，否則上面的加懸停效果

使用js通過(guò)鼠標(biāo)事件給相關(guān)的兩行添加或者移除class：

css

.active {
    background: red;
}

js

let trs = document.querySelectorAll('tbody tr')
let curIndex = -1
trs.forEach(tr => {
  tr.addEventListener('mouseover', function(event) {
    let index = Array.prototype.indexOf.call(trs, event.currentTarget)
    if (index !== -1) {
      let half = Math.floor(index / 2)
      if (curIndex !== -1) {
        trs[curIndex * 2].classList.remove('active') // 移除上次高亮的兩行
        trs[curIndex * 2 + 1].classList.remove('active')
      }
      trs[half * 2].classList.add('active') // 給相關(guān)的兩行添加class
      trs[half * 2 + 1].classList.add('active')
      curIndex = half
    } else {
      curIndex = -1
    }
  }, false)

  tr.addEventListener('mouseout', function(event) {
    if (curIndex !== -1) { // 移除上次高亮的兩行
      trs[curIndex * 2].classList.remove('active')
      trs[curIndex * 2 + 1].classList.remove('active')
      curIndex = -1
    }
  }, false)
})

應(yīng)該有兩種方案吧。
1是用js加減class方案代替hover
2是更改dom結(jié)構(gòu)。一行是一個(gè)table或者是其他的。就是每行保證和表頭沖齊。看起來(lái)。看起來(lái)像是一個(gè)表格。但實(shí)際不是表格。
第一種對(duì)現(xiàn)有結(jié)構(gòu)更好改一點(diǎn)