将游标设置为具有 is-inactive class 的元素的默认值
Setting cursor to default for elements with is-inactive class
Objective
一旦每个类别中的最大球员人数(两名守门员、六名防守队员、十二名前锋)被选择,剩下的球员 picked
class is-inactive
应该设置为 cursor:default
澄清问题
所有玩家默认设置 class is-inactive
, 而我正在尝试设置 cursor: default
只有在其他玩家被选中并将他们的 class 切换为 is-active
之后。
ie. 两名守门员被选中,现在拥有 is-active
的 class 并在悬停时采取 cursor:pointer
行为。此类别共有十名球员,其他八名守门员 is-inactive
应该有 cursor: default
行为。
问题
- 我正在尝试将光标的 css 切换回默认值,但即使
is-inactive
的玩家仍然有 cursor: pointer
style.css
.player {
display: inline-block;
margin-top: 15px;
margin-right: 20px;
vertical-align: top;
cursor: pointer;
position: relative;
}
index.html
<div class="player player--goalie year--1990">
<div class="tooltip tooltip--tall">
<p class="tooltip__name">Brian Elder</p>
<p class="tooltip__hometown"><span>Hometown:</span> Oak Lake, Man.</p>
<p class="tooltip__years"><span>Years Played:</span> 1992-1997</p>
<div class="tooltip__stats--inline">
<div class="stats__group stats--games">
<p class="stats__header">GP</p>
<p class="stats__number stats__number--games">110</p>
</div>
<div class="stats__group stats--goalsag">
<p class="stats__header">GA</p>
<p class="stats__number stats__number--goalsag">2.00</p>
<p class="stats__number">3.12</p>
<p class="stats__number">3.46</p>
<p class="stats__number">2.70</p>
</div>
<div class="stats__group stats--savep">
<p class="stats__header">SAV%</p>
<p class="stats__number stats__number--savep">.909</p>
<p class="stats__number">.886</p>
<p class="stats__number">.884</p>
<p class="stats__number">.906</p>
</div>
<div class="stats__group stats--shutouts">
<p class="stats__header">SO</p>
<p class="stats__number">0</p>
<p class="stats__number">0</p>
<p class="stats__number stats__number--shutouts">3</p>
<p class="stats__number">2</p>
</div>
</div> <!-- tooltip__stats--inline -->
</div> <!-- tooltip -->
<div class="player__headshot player--elder">
<div class="picked is-inactive"><i class="fa fa-star" aria-hidden="true"></i></div>
</div>
<p class="player__name">Brian Elder</p>
<p class="player__position">Goalie</p>
</div>
scripts.js
/*-------------------------------------
COUNT SELECTED
--------------------------------------*/
function countSelected() {
$(".player").on("click", function(){
// Checks if the maximum number of players have been selected
// If so, return false and then do nothing
// If not, the class will toggle from `is-inactive` to `is-active`
if ($(this).find(".picked.full").length > 0) return false;
$(this).find(".picked").toggleClass("is-inactive is-active");
// Count the number of players with stars
var starredGoaltenders = $(".player--goalie").find(".picked.is-active").length;
var starredDefencemen = $(".player--defencemen").find(".picked.is-active").length;
var starredForwards = $(".player--forward").find(".picked.is-active").length;
console.log(starredGoaltenders, starredDefencemen, starredForwards);
// The number of starred players for each position cannot exceed the following numbers
var maxGoaltenders = 2;
var maxDefencemen = 6;
var maxFowards = 12;
// If the number of starred players hits its max, a class of `is-completed` is adding to the corresponding checkmark to indicate that the task has been completed
if (starredGoaltenders === maxGoaltenders) {
$(".checkmark--goalie").addClass("is-completed");
$(".player--goalie").find(".picked").addClass("full");
}
if (starredDefencemen === maxDefencemen) {
$(".checkmark--defencemen").addClass("is-completed");
$(".player--defencemen").find(".picked").addClass("full");
}
if (starredForwards === maxFowards) {
$(".checkmark--forward").addClass("is-completed");
$(".player--forward").find(".picked").addClass("full");
}
// If all the conditions are met show the submit vote button
if (starredGoaltenders === maxGoaltenders && starredDefencemen === maxDefencemen && starredForwards === maxFowards) {
$(".btn--submit").show();
$(".btn--submit").addClass("slideLeft");
}
});
} countSelected();
您可以使用 .class1.class2
select 具有多个 class 的元素。尝试在 CSS.
的末尾添加以下代码
.player .is-active.picked {
cursor: pointer;
}
注意: 最好避免在 class 名称中使用 -
。而不是 is-inactive
使用 isInactive
或 is_inactive
.
.player {
display: inline-block;
margin-top: 15px;
margin-right: 20px;
vertical-align: top;
cursor: default;
position: relative;
}
.player.is-inactive {
cursor: default;
}
<div class="player is-inactive player--goalie year--1990">
<div class="tooltip tooltip--tall">
<p class="tooltip__name">Brian Elder</p>
<p class="tooltip__hometown"><span>Hometown:</span> Oak Lake, Man.</p>
<p class="tooltip__years"><span>Years Played:</span> 1992-1997</p>
<div class="tooltip__stats--inline">
<div class="stats__group stats--games">
<p class="stats__header">GP</p>
<p class="stats__number stats__number--games">110</p>
</div>
<div class="stats__group stats--goalsag">
<p class="stats__header">GA</p>
<p class="stats__number stats__number--goalsag">2.00</p>
<p class="stats__number">3.12</p>
<p class="stats__number">3.46</p>
<p class="stats__number">2.70</p>
</div>
<div class="stats__group stats--savep">
<p class="stats__header">SAV%</p>
<p class="stats__number stats__number--savep">.909</p>
<p class="stats__number">.886</p>
<p class="stats__number">.884</p>
<p class="stats__number">.906</p>
</div>
<div class="stats__group stats--shutouts">
<p class="stats__header">SO</p>
<p class="stats__number">0</p>
<p class="stats__number">0</p>
<p class="stats__number stats__number--shutouts">3</p>
<p class="stats__number">2</p>
</div>
</div>
<!-- tooltip__stats--inline -->
</div>
<!-- tooltip -->
<div class="player__headshot player--elder">
<div class="picked is-inactive"><i class="fa fa-star" aria-hidden="true"></i>
</div>
</div>
<p class="player__name">Brian Elder</p>
<p class="player__position">Goalie</p>
</div>
如果您不介意 javascript 解决方案,在第一次点击玩家后向 .is-inactive 播放器添加 class 将提供解决方案。
编辑 我的第一个例子有点不对劲,因为 .is-inactive 和 .is-active classes 不适用于 .player 对象,但给后代,但是以下代码片段提供了正确的实现:
第二次编辑 在与 OP 就他的期望进行了一些讨论之后,以下实现更适合他的需要。我将 .is-active 和 .is-inactive classes 移动到 .player 元素,然后将以下行添加到点击功能:
$(".player").filter(".is-active").removeClass("not-picked");
$(".player").filter(".is-inactive").addClass("not-picked");
这对CSS:
.not-picked {
cursor: default;
}
所以现在无论何时点击一名球员,它都会 select 或 deselect 该球员和光标将改变,除非球员类型(即守门员)已满。
/*-------------------------------------
COUNT SELECTED
--------------------------------------*/
function countSelected() {
$(".player").on("click", function(){
// Checks if the maximum number of players have been selected
// If not, the class will toggle from `is-inactive` to `is-active`
if ($(this).hasClass("full")) return false;
$(this).toggleClass("is-inactive is-active");
$(".player").filter(".is-active").removeClass("not-picked");
$(".player").filter(".is-inactive").addClass("not-picked");
// Count the number of players with stars
var starredGoaltenders = $(".player--goalie").filter(".is-active").length;
var starredDefencemen = $(".player--defencemen").filter(".is-active").length;
var starredForwards = $(".player--forward").filter(".is-active").length;
console.log(starredGoaltenders, starredDefencemen, starredForwards);
// The number of starred players for each position cannot exceed the following numbers
var maxGoaltenders = 2;
var maxDefencemen = 6;
var maxFowards = 12;
// If the number of starred players hits its max, a class of `is-completed` is adding to the corresponding checkmark to indicate that the task has been completed
if (starredGoaltenders === maxGoaltenders) {
$(".checkmark--goalie").addClass("is-completed");
$(".player--goalie").addClass("full");
}
if (starredDefencemen === maxDefencemen) {
$(".checkmark--defencemen").addClass("is-completed");
$(".player--defencemen").addClass("full");
}
if (starredForwards === maxFowards) {
$(".checkmark--forward").addClass("is-completed");
$(".player--forward").addClass("full");
}
// If all the conditions are met show the submit vote button
if (starredGoaltenders === maxGoaltenders && starredDefencemen === maxDefencemen && starredForwards === maxFowards) {
$(".btn--submit").show();
$(".btn--submit").addClass("slideLeft");
}
});
} countSelected();
.player {
display: inline-block;
margin-top: 15px;
margin-right: 20px;
cursor: pointer;
vertical-align: top;
position: relative;
}
.not-picked {
cursor: default;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="player player--goalie year--1990 is-inactive">
<div class="tooltip tooltip--tall">
<p class="tooltip__name">Brian Elder</p>
<p class="tooltip__hometown"><span>Hometown:</span> Oak Lake, Man.</p>
<p class="tooltip__years"><span>Years Played:</span> 1992-1997</p>
<div class="tooltip__stats--inline">
<div class="stats__group stats--games">
<p class="stats__header">GP</p>
<p class="stats__number stats__number--games">110</p>
</div>
<div class="stats__group stats--goalsag">
<p class="stats__header">GA</p>
<p class="stats__number stats__number--goalsag">2.00</p>
<p class="stats__number">3.12</p>
<p class="stats__number">3.46</p>
<p class="stats__number">2.70</p>
</div>
<div class="stats__group stats--savep">
<p class="stats__header">SAV%</p>
<p class="stats__number stats__number--savep">.909</p>
<p class="stats__number">.886</p>
<p class="stats__number">.884</p>
<p class="stats__number">.906</p>
</div>
<div class="stats__group stats--shutouts">
<p class="stats__header">SO</p>
<p class="stats__number">0</p>
<p class="stats__number">0</p>
<p class="stats__number stats__number--shutouts">3</p>
<p class="stats__number">2</p>
</div>
</div> <!-- tooltip__stats--inline -->
</div> <!-- tooltip -->
<div class="player__headshot player--elder">
<div><i class="fa fa-star" aria-hidden="true"></i></div>
</div>
<p class="player__name">Brian Elder</p>
<p class="player__position">Goalie</p>
</div>
<div class="player player--defencemen year--1990 is-inactive">
<div class="tooltip tooltip--tall">
<p class="tooltip__name">Brian Elder</p>
<p class="tooltip__hometown"><span>Hometown:</span> Oak Lake, Man.</p>
<p class="tooltip__years"><span>Years Played:</span> 1992-1997</p>
<div class="tooltip__stats--inline">
<div class="stats__group stats--games">
<p class="stats__header">GP</p>
<p class="stats__number stats__number--games">110</p>
</div>
<div class="stats__group stats--goalsag">
<p class="stats__header">GA</p>
<p class="stats__number stats__number--goalsag">2.00</p>
<p class="stats__number">3.12</p>
<p class="stats__number">3.46</p>
<p class="stats__number">2.70</p>
</div>
<div class="stats__group stats--savep">
<p class="stats__header">SAV%</p>
<p class="stats__number stats__number--savep">.909</p>
<p class="stats__number">.886</p>
<p class="stats__number">.884</p>
<p class="stats__number">.906</p>
</div>
<div class="stats__group stats--shutouts">
<p class="stats__header">SO</p>
<p class="stats__number">0</p>
<p class="stats__number">0</p>
<p class="stats__number stats__number--shutouts">3</p>
<p class="stats__number">2</p>
</div>
</div> <!-- tooltip__stats--inline -->
</div> <!-- tooltip -->
<div class="player__headshot player--elder">
<div><i class="fa fa-star" aria-hidden="true"></i></div>
</div>
<p class="player__name">Brian Elder</p>
<p class="player__position">Goalie</p>
</div>
<div class="player player--goalie year--1990 is-inactive">
<div class="tooltip tooltip--tall">
<p class="tooltip__name">Brian Elder</p>
<p class="tooltip__hometown"><span>Hometown:</span> Oak Lake, Man.</p>
<p class="tooltip__years"><span>Years Played:</span> 1992-1997</p>
<div class="tooltip__stats--inline">
<div class="stats__group stats--games">
<p class="stats__header">GP</p>
<p class="stats__number stats__number--games">110</p>
</div>
<div class="stats__group stats--goalsag">
<p class="stats__header">GA</p>
<p class="stats__number stats__number--goalsag">2.00</p>
<p class="stats__number">3.12</p>
<p class="stats__number">3.46</p>
<p class="stats__number">2.70</p>
</div>
<div class="stats__group stats--savep">
<p class="stats__header">SAV%</p>
<p class="stats__number stats__number--savep">.909</p>
<p class="stats__number">.886</p>
<p class="stats__number">.884</p>
<p class="stats__number">.906</p>
</div>
<div class="stats__group stats--shutouts">
<p class="stats__header">SO</p>
<p class="stats__number">0</p>
<p class="stats__number">0</p>
<p class="stats__number stats__number--shutouts">3</p>
<p class="stats__number">2</p>
</div>
</div> <!-- tooltip__stats--inline -->
</div> <!-- tooltip -->
<div class="player__headshot player--elder">
<div><i class="fa fa-star" aria-hidden="true"></i></div>
</div>
<p class="player__name">Brian Elder</p>
<p class="player__position">Goalie</p>
</div>
Objective
一旦每个类别中的最大球员人数(两名守门员、六名防守队员、十二名前锋)被选择,剩下的球员 picked
class is-inactive
应该设置为 cursor:default
澄清问题
所有玩家默认设置 class is-inactive
, 而我正在尝试设置 cursor: default
只有在其他玩家被选中并将他们的 class 切换为 is-active
之后。
ie. 两名守门员被选中,现在拥有 is-active
的 class 并在悬停时采取 cursor:pointer
行为。此类别共有十名球员,其他八名守门员 is-inactive
应该有 cursor: default
行为。
问题
- 我正在尝试将光标的 css 切换回默认值,但即使
is-inactive
的玩家仍然有cursor: pointer
style.css
.player {
display: inline-block;
margin-top: 15px;
margin-right: 20px;
vertical-align: top;
cursor: pointer;
position: relative;
}
index.html
<div class="player player--goalie year--1990">
<div class="tooltip tooltip--tall">
<p class="tooltip__name">Brian Elder</p>
<p class="tooltip__hometown"><span>Hometown:</span> Oak Lake, Man.</p>
<p class="tooltip__years"><span>Years Played:</span> 1992-1997</p>
<div class="tooltip__stats--inline">
<div class="stats__group stats--games">
<p class="stats__header">GP</p>
<p class="stats__number stats__number--games">110</p>
</div>
<div class="stats__group stats--goalsag">
<p class="stats__header">GA</p>
<p class="stats__number stats__number--goalsag">2.00</p>
<p class="stats__number">3.12</p>
<p class="stats__number">3.46</p>
<p class="stats__number">2.70</p>
</div>
<div class="stats__group stats--savep">
<p class="stats__header">SAV%</p>
<p class="stats__number stats__number--savep">.909</p>
<p class="stats__number">.886</p>
<p class="stats__number">.884</p>
<p class="stats__number">.906</p>
</div>
<div class="stats__group stats--shutouts">
<p class="stats__header">SO</p>
<p class="stats__number">0</p>
<p class="stats__number">0</p>
<p class="stats__number stats__number--shutouts">3</p>
<p class="stats__number">2</p>
</div>
</div> <!-- tooltip__stats--inline -->
</div> <!-- tooltip -->
<div class="player__headshot player--elder">
<div class="picked is-inactive"><i class="fa fa-star" aria-hidden="true"></i></div>
</div>
<p class="player__name">Brian Elder</p>
<p class="player__position">Goalie</p>
</div>
scripts.js
/*-------------------------------------
COUNT SELECTED
--------------------------------------*/
function countSelected() {
$(".player").on("click", function(){
// Checks if the maximum number of players have been selected
// If so, return false and then do nothing
// If not, the class will toggle from `is-inactive` to `is-active`
if ($(this).find(".picked.full").length > 0) return false;
$(this).find(".picked").toggleClass("is-inactive is-active");
// Count the number of players with stars
var starredGoaltenders = $(".player--goalie").find(".picked.is-active").length;
var starredDefencemen = $(".player--defencemen").find(".picked.is-active").length;
var starredForwards = $(".player--forward").find(".picked.is-active").length;
console.log(starredGoaltenders, starredDefencemen, starredForwards);
// The number of starred players for each position cannot exceed the following numbers
var maxGoaltenders = 2;
var maxDefencemen = 6;
var maxFowards = 12;
// If the number of starred players hits its max, a class of `is-completed` is adding to the corresponding checkmark to indicate that the task has been completed
if (starredGoaltenders === maxGoaltenders) {
$(".checkmark--goalie").addClass("is-completed");
$(".player--goalie").find(".picked").addClass("full");
}
if (starredDefencemen === maxDefencemen) {
$(".checkmark--defencemen").addClass("is-completed");
$(".player--defencemen").find(".picked").addClass("full");
}
if (starredForwards === maxFowards) {
$(".checkmark--forward").addClass("is-completed");
$(".player--forward").find(".picked").addClass("full");
}
// If all the conditions are met show the submit vote button
if (starredGoaltenders === maxGoaltenders && starredDefencemen === maxDefencemen && starredForwards === maxFowards) {
$(".btn--submit").show();
$(".btn--submit").addClass("slideLeft");
}
});
} countSelected();
您可以使用 .class1.class2
select 具有多个 class 的元素。尝试在 CSS.
.player .is-active.picked {
cursor: pointer;
}
注意: 最好避免在 class 名称中使用 -
。而不是 is-inactive
使用 isInactive
或 is_inactive
.
.player {
display: inline-block;
margin-top: 15px;
margin-right: 20px;
vertical-align: top;
cursor: default;
position: relative;
}
.player.is-inactive {
cursor: default;
}
<div class="player is-inactive player--goalie year--1990">
<div class="tooltip tooltip--tall">
<p class="tooltip__name">Brian Elder</p>
<p class="tooltip__hometown"><span>Hometown:</span> Oak Lake, Man.</p>
<p class="tooltip__years"><span>Years Played:</span> 1992-1997</p>
<div class="tooltip__stats--inline">
<div class="stats__group stats--games">
<p class="stats__header">GP</p>
<p class="stats__number stats__number--games">110</p>
</div>
<div class="stats__group stats--goalsag">
<p class="stats__header">GA</p>
<p class="stats__number stats__number--goalsag">2.00</p>
<p class="stats__number">3.12</p>
<p class="stats__number">3.46</p>
<p class="stats__number">2.70</p>
</div>
<div class="stats__group stats--savep">
<p class="stats__header">SAV%</p>
<p class="stats__number stats__number--savep">.909</p>
<p class="stats__number">.886</p>
<p class="stats__number">.884</p>
<p class="stats__number">.906</p>
</div>
<div class="stats__group stats--shutouts">
<p class="stats__header">SO</p>
<p class="stats__number">0</p>
<p class="stats__number">0</p>
<p class="stats__number stats__number--shutouts">3</p>
<p class="stats__number">2</p>
</div>
</div>
<!-- tooltip__stats--inline -->
</div>
<!-- tooltip -->
<div class="player__headshot player--elder">
<div class="picked is-inactive"><i class="fa fa-star" aria-hidden="true"></i>
</div>
</div>
<p class="player__name">Brian Elder</p>
<p class="player__position">Goalie</p>
</div>
如果您不介意 javascript 解决方案,在第一次点击玩家后向 .is-inactive 播放器添加 class 将提供解决方案。
编辑 我的第一个例子有点不对劲,因为 .is-inactive 和 .is-active classes 不适用于 .player 对象,但给后代,但是以下代码片段提供了正确的实现:
第二次编辑 在与 OP 就他的期望进行了一些讨论之后,以下实现更适合他的需要。我将 .is-active 和 .is-inactive classes 移动到 .player 元素,然后将以下行添加到点击功能:
$(".player").filter(".is-active").removeClass("not-picked");
$(".player").filter(".is-inactive").addClass("not-picked");
这对CSS:
.not-picked {
cursor: default;
}
所以现在无论何时点击一名球员,它都会 select 或 deselect 该球员和光标将改变,除非球员类型(即守门员)已满。
/*-------------------------------------
COUNT SELECTED
--------------------------------------*/
function countSelected() {
$(".player").on("click", function(){
// Checks if the maximum number of players have been selected
// If not, the class will toggle from `is-inactive` to `is-active`
if ($(this).hasClass("full")) return false;
$(this).toggleClass("is-inactive is-active");
$(".player").filter(".is-active").removeClass("not-picked");
$(".player").filter(".is-inactive").addClass("not-picked");
// Count the number of players with stars
var starredGoaltenders = $(".player--goalie").filter(".is-active").length;
var starredDefencemen = $(".player--defencemen").filter(".is-active").length;
var starredForwards = $(".player--forward").filter(".is-active").length;
console.log(starredGoaltenders, starredDefencemen, starredForwards);
// The number of starred players for each position cannot exceed the following numbers
var maxGoaltenders = 2;
var maxDefencemen = 6;
var maxFowards = 12;
// If the number of starred players hits its max, a class of `is-completed` is adding to the corresponding checkmark to indicate that the task has been completed
if (starredGoaltenders === maxGoaltenders) {
$(".checkmark--goalie").addClass("is-completed");
$(".player--goalie").addClass("full");
}
if (starredDefencemen === maxDefencemen) {
$(".checkmark--defencemen").addClass("is-completed");
$(".player--defencemen").addClass("full");
}
if (starredForwards === maxFowards) {
$(".checkmark--forward").addClass("is-completed");
$(".player--forward").addClass("full");
}
// If all the conditions are met show the submit vote button
if (starredGoaltenders === maxGoaltenders && starredDefencemen === maxDefencemen && starredForwards === maxFowards) {
$(".btn--submit").show();
$(".btn--submit").addClass("slideLeft");
}
});
} countSelected();
.player {
display: inline-block;
margin-top: 15px;
margin-right: 20px;
cursor: pointer;
vertical-align: top;
position: relative;
}
.not-picked {
cursor: default;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="player player--goalie year--1990 is-inactive">
<div class="tooltip tooltip--tall">
<p class="tooltip__name">Brian Elder</p>
<p class="tooltip__hometown"><span>Hometown:</span> Oak Lake, Man.</p>
<p class="tooltip__years"><span>Years Played:</span> 1992-1997</p>
<div class="tooltip__stats--inline">
<div class="stats__group stats--games">
<p class="stats__header">GP</p>
<p class="stats__number stats__number--games">110</p>
</div>
<div class="stats__group stats--goalsag">
<p class="stats__header">GA</p>
<p class="stats__number stats__number--goalsag">2.00</p>
<p class="stats__number">3.12</p>
<p class="stats__number">3.46</p>
<p class="stats__number">2.70</p>
</div>
<div class="stats__group stats--savep">
<p class="stats__header">SAV%</p>
<p class="stats__number stats__number--savep">.909</p>
<p class="stats__number">.886</p>
<p class="stats__number">.884</p>
<p class="stats__number">.906</p>
</div>
<div class="stats__group stats--shutouts">
<p class="stats__header">SO</p>
<p class="stats__number">0</p>
<p class="stats__number">0</p>
<p class="stats__number stats__number--shutouts">3</p>
<p class="stats__number">2</p>
</div>
</div> <!-- tooltip__stats--inline -->
</div> <!-- tooltip -->
<div class="player__headshot player--elder">
<div><i class="fa fa-star" aria-hidden="true"></i></div>
</div>
<p class="player__name">Brian Elder</p>
<p class="player__position">Goalie</p>
</div>
<div class="player player--defencemen year--1990 is-inactive">
<div class="tooltip tooltip--tall">
<p class="tooltip__name">Brian Elder</p>
<p class="tooltip__hometown"><span>Hometown:</span> Oak Lake, Man.</p>
<p class="tooltip__years"><span>Years Played:</span> 1992-1997</p>
<div class="tooltip__stats--inline">
<div class="stats__group stats--games">
<p class="stats__header">GP</p>
<p class="stats__number stats__number--games">110</p>
</div>
<div class="stats__group stats--goalsag">
<p class="stats__header">GA</p>
<p class="stats__number stats__number--goalsag">2.00</p>
<p class="stats__number">3.12</p>
<p class="stats__number">3.46</p>
<p class="stats__number">2.70</p>
</div>
<div class="stats__group stats--savep">
<p class="stats__header">SAV%</p>
<p class="stats__number stats__number--savep">.909</p>
<p class="stats__number">.886</p>
<p class="stats__number">.884</p>
<p class="stats__number">.906</p>
</div>
<div class="stats__group stats--shutouts">
<p class="stats__header">SO</p>
<p class="stats__number">0</p>
<p class="stats__number">0</p>
<p class="stats__number stats__number--shutouts">3</p>
<p class="stats__number">2</p>
</div>
</div> <!-- tooltip__stats--inline -->
</div> <!-- tooltip -->
<div class="player__headshot player--elder">
<div><i class="fa fa-star" aria-hidden="true"></i></div>
</div>
<p class="player__name">Brian Elder</p>
<p class="player__position">Goalie</p>
</div>
<div class="player player--goalie year--1990 is-inactive">
<div class="tooltip tooltip--tall">
<p class="tooltip__name">Brian Elder</p>
<p class="tooltip__hometown"><span>Hometown:</span> Oak Lake, Man.</p>
<p class="tooltip__years"><span>Years Played:</span> 1992-1997</p>
<div class="tooltip__stats--inline">
<div class="stats__group stats--games">
<p class="stats__header">GP</p>
<p class="stats__number stats__number--games">110</p>
</div>
<div class="stats__group stats--goalsag">
<p class="stats__header">GA</p>
<p class="stats__number stats__number--goalsag">2.00</p>
<p class="stats__number">3.12</p>
<p class="stats__number">3.46</p>
<p class="stats__number">2.70</p>
</div>
<div class="stats__group stats--savep">
<p class="stats__header">SAV%</p>
<p class="stats__number stats__number--savep">.909</p>
<p class="stats__number">.886</p>
<p class="stats__number">.884</p>
<p class="stats__number">.906</p>
</div>
<div class="stats__group stats--shutouts">
<p class="stats__header">SO</p>
<p class="stats__number">0</p>
<p class="stats__number">0</p>
<p class="stats__number stats__number--shutouts">3</p>
<p class="stats__number">2</p>
</div>
</div> <!-- tooltip__stats--inline -->
</div> <!-- tooltip -->
<div class="player__headshot player--elder">
<div><i class="fa fa-star" aria-hidden="true"></i></div>
</div>
<p class="player__name">Brian Elder</p>
<p class="player__position">Goalie</p>
</div>