这个对战图里的高亮效果怎样实现呢。 hover 到某个节点，能高亮对应的路径

[PainAndLove]

https://www.dota2.com.cn/international/2021/rank

[ragnaroks]

不考虑样式表，这是一个倒过来的"Tree"

[PainAndLove]

@ragnaroks 好像不是，tree 的话，节点 ID 是不能重复的，但是上面的某个队伍可以同时出现在上下。

[ragnaroks]

@PainAndLove 节点 id 和队伍无关，或者说都不需要所谓 id ，多级数组就行了

[LeeReamond]

你确定是纯 css 实现的吗，那倒是相当高级了感觉。。

[w88975]

鼠标 hover 到某个节点，寻找这个 team-**** 的 ID ，把所有该 ID 加上高亮不就搞定了吗

[w88975]

例如: $('.team-3522').addClass('team-match-hover')

[Vegetable]

https://www.dota2.com.cn/international2021/assets/js/rank.js?v=20220105 : 194

[lslqtz]

js 实现的话挺简单，都不需要 id ，相同颜色就可以

[myl0204]

恭喜雪碧

[guoziq09]

为啥不 ban 猛犸？

[lisongeee]

hover 的时候路线可以变成移动的虚线

[wednesdayco]

这 js 实现的


J_bracketArea.on('mouseover', '.matchteam', function (e) {
var _self = $(this)
_classString = _self.attr('class')
_class = _classString.split(' ')
if (_self.hasClass('team-')) {
return
}
for (var i = 0; i < _class.length; i++) {
var Is_team = _class[i].indexOf('team-')
if (Is_team === 0) {
var team_van = _class[i],
all_team_van = $('.' + team_van),
all_team_line_van = $('.line' + team_van)
all_team_van.addClass('team-match-hover')
all_team_line_van.addClass('linematch')
console.log(all_team_line_van)
stack = stack.add(all_team_van)
linestack = linestack.add(all_team_line_van)
}
$('.team-match-hover').parent().parent().css(moveTop)
}
}).on('mouseout', '.matchteam', function (e) {
$('.team-match-hover').parent().parent().css(moveNoraml)
stack.removeClass('team-match-hover')
linestack.removeClass('linematch')
stack = $()
linestack = $()
})