Question 45548 in CSS Question posted in
Some basic documentation can be found here.

why is my .invisible class added to all elements – child, parent, etc – CSS

When I drag one card with the red border, I wanted to only show the dragged element. So, I added the .invisible class to the original element, but everything is invisible now. Why?

Full code here: https://codepen.io/asamad9134/pen/WNKLpZb

const cards = document.querySelector('.cards');

cards.addEventListener('dragstart', (event) => {
  const selectedCard = event.target;
  selectedCard.classList.add('invisible');
});


cards.addEventListener('dragend', (event) => {
  const selectedCard = event.target;
  selectedCard.classList.remove('invisible');
});
.cards {
  display: flex;
  width: 100vw;
  justify-content: space-around;
}

.card {
  font-family: Arabic;
  border-radius: 10%;
  ;
  font-size: 4em;
  text-align: center;
  width: 200px;
  height: 130px;
  background-color: white;
  border: 10px solid rgb(255, 85, 0);
}

.card:hover {
  cursor: grab;
  transform: scale(1.2);
  transition: 0.3s;
}

.empty-divs {
  display: flex;
  justify-content: space-around;
  width: 100vw;
}

.empty-div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.blank-card {
  width: 200px;
  height: 130px;
  background-color: #f4f4f4;
  border-radius: 10%;
  text-align: center;
  border: 10px solid grey;
}

.invisible {
  display: none;
}
<section class="cards">
  <p class="card card-idle" id="أَرْنَب" draggable=true>أَرْنَب</p>
  <p class="card card-idle" draggable=true>كِتَاب</p>
  <p class="card card-idle" draggable=true>كُرَة</p>
</section>


<section class="empty-divs">

  <div class="empty-div">
    <img id="rabbit" src="http://source.unsplash.com/random/200x200" alt="rabbit" />
    <p class="blank-card"></p>

  </div>

  <div class="empty-div">
    <img id="rabbit" src="http://source.unsplash.com/random/200x200" alt="rabbit" />
    <p class="blank-card"></p>
  </div>

  <div class="empty-div">
    <img id="rabbit" src="http://source.unsplash.com/random/200x200" alt="rabbit" />
    <p class="blank-card"></p>
  </div>

</section>

EDIT, I set the opacity: 0; instead but this has a strange lag affect.

Tags:

2

Answers


  1. 0

    display: none; removes the tag and its effects for all intents and purposes, but the tag remains visible in the source code. Try using opacity: 0.4; so that it’s visibility is changed and not completely removed from the structure. You could then set that opacity to 0 if you wanted it to be completely invisibile, but not be removed.

    Login or Signup to reply.
  2. 0

    Here’s an approach to make it so that only the current element that is being dragged displays. Note that I also used visibility: hidden to hide the cards instead of opacity: 0.

    // create a nodelist of all of the cards
const cards = document.querySelectorAll('.card');

// add a an event listener for each card in the nodelist
cards.forEach(card => {
  card.addEventListener('dragstart', (event) => { 
    const selectedCard = event.target;
    // create an array of the cards that are not selected so you can
    // "hide" only the not selected cards
    const notSelectedCards = Array.from(cards).filter(card => card !== selectedCard)
    selectedCard.classList.add('card-dragging');
    notSelectedCards.forEach(card => card.classList.add('invisible'));
    
    // remove the "invisible" class (and do whatever other
    // cleanup on dragend that you want)
    selectedCard.addEventListener('dragend', (event) => { 
      selectedCard.classList.remove('card-dragging');
      notSelectedCards.forEach(card => card.classList.remove('invisible'));
    }, { once: true});
  })
})
    * {
  box-sizing: border-box;
}

.cards {
  display:flex;
  justify-content: space-around;
}

.card {
  font-family: Arabic;
  border-radius: 10%;
  font-size: 4em;
  text-align:center;
  width: 200px;
  height: 130px;
  background-color: white;  
  border: 10px solid rgb(255, 85, 0);
}

.card:hover{
  cursor: grab;
  transform: scale(1.2);
  transition: 0.3s;
}

.empty-divs{
  display: flex;
  justify-content: space-around;
}

.empty-div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.blank-card {
  width: 200px;
  height: 130px;
  background-color: #f4f4f4;
  border-radius: 10%;
  text-align:center;
  border: 10px solid grey;
}

.invisible {
  visibility: hidden;
}

.card-dragging {
  opacity: .2;
}
    <section class="cards">
  <p class="card card-idle" id="أَرْنَب" draggable=true>أَرْنَب</p>
  <p class="card card-idle" draggable=true>كِتَاب</p>
  <p class="card card-idle" draggable=true>كُرَة</p>
</section>


<section class="empty-divs">

  <div class="empty-div">
    <img src="http://source.unsplash.com/random/200x200" alt="random" />
    <p class="blank-card"></p>

  </div>

  <div class="empty-div">
    <img src="http://source.unsplash.com/random/200x200" alt="random" />
    <p class="blank-card"></p>
  </div>

  <div class="empty-div">
    <img src="http://source.unsplash.com/random/200x200" alt="random" />
    <p class="blank-card"></p>
  </div>

</section>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search