Andrew Nguyen Andrew Nguyen - 4 months ago 8
CSS Question

Setting cursor to default for elements with is-inactive class

Objective



Once the maximum number of players (two goalies, six defensemen, twelve forwards) in each of their categories have been chosen, the remaining players
picked
with the class
is-inactive
should been set to
cursor:default


Clarification of the problem



All the players have the class
is-inactive
as a default,
and what I'm trying to do is trying to set
cursor: default
only after other players have been picked and have had their class switched to
is-active
.

ie. Two goalies are picked and now have the class of
is-active
and take the
cursor:pointer
behaviour on hover. There are a total of ten players in this category, the other eight goalies are
is-inactive
and should have the
cursor: default
behaviour.

Problem




  • I'm trying to switch the css for the cursor back to it's default, but even players with
    is-inactive
    still have the
    cursor: pointer
    on them



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();

Answer

If you don't mind a javascript solution, adding a class to the .is-inactive players after the first click of a player will provide a solution.

EDIT I was a little off with my first example because the .is-inactive and .is-active classes apply not to the .player objects but to descendants, however the following snippet provides the correct implementation:

/*-------------------------------------
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).find(".picked.full").length > 0) return false;
        $(this).find(".picked").toggleClass("is-inactive is-active");
        $(".player").removeClass("not-picked");
        $(".player").not(":has(.is-active)").addClass("not-picked");
        // 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();
.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">
  <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>

<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>

So in order to accomplish this I had to addClass("not-picked") to all ".player" elements that did not have ".is-active elements, I also had to make sure the players that later became active would have this class removed so I added the line before it that removes the class "not-picked" from all ".player" elements. Hence, the solution lies in these two lines in the click function:

$(".player").removeClass("not-picked");
$(".player").not(":has(.is-active)").addClass("not-picked");

and this CSS:

.not-picked {
  cursor: default;
}