如何点击div激活hover类实现卡片翻面效果？

Got it! Let's tweak your existing code to make the card flip on click instead of hover. Your current setup already has the core flip logic via the hover class—we just need to switch the trigger from mouse hover to a click event. Here's how to do it step by step:

1. Update the HTML for click targeting #

First, add a custom class (like flip-card) to the outer container of each card. This makes it easier to select the elements with JavaScript. You can also remove the existing ontouchstart attribute since we'll handle the trigger with JS:

<div class="col-xs-12 col-sm-6 col-md-4">
  <div class="image-flip flip-card"> <!-- Added flip-card class for JS selection -->
    <div class="mainflip">
      <!-- Keep your existing frontside and backside content exactly as is -->
      <div class="frontside">...</div>
      <div class="backside">...</div>
    </div>
  </div>
</div>

2. Keep your CSS as-is (no changes needed!) #

Your existing CSS already defines the flip behavior for both the :hover pseudo-class and the .hover class. Since the styles are identical, we don't need to modify any CSS—we just need to toggle the .hover class on click instead of relying on mouse hover.

3. Add JavaScript to handle click events #

Add this script at the bottom of your page (or inside a <script> tag) to bind click events to each card and toggle the flip class:

// Wait for the page to fully load before running the script
document.addEventListener('DOMContentLoaded', () => {
  // Get all flip card containers
  const flipCards = document.querySelectorAll('.flip-card');
  
  // Bind a click event to each card
  flipCards.forEach(card => {
    card.addEventListener('click', () => {
      // Toggle the 'hover' class to flip/unflip the card
      card.classList.toggle('hover');
    });
  });
});

Full modified code example #

HTML #

<section id="team" class="pb-5">
  <div class="container">
    <h5 class="section-title h1">OUR TEAM</h5>
    <div class="row">
      <!-- Team member -->
      <div class="col-xs-12 col-sm-6 col-md-4">
        <div class="image-flip flip-card">
          <div class="mainflip">
            <div class="frontside">
              <div class="card">
                <div class="card-body text-center">
                  <p><img class=" img-fluid" src="https://sunlimetech.com/portfolio/boot4menu/assets/imgs/team/img_01.png" alt="card image"></p>
                  <h4 class="card-title">Sunlimetech</h4>
                  <p class="card-text">This is basic card with image on top, title, description and button.</p>
                  <a href="#" class="btn btn-primary btn-sm"><i class="fa fa-plus"></i></a>
                </div>
              </div>
            </div>
            <div class="backside">
              <div class="card">
                <div class="card-body text-center mt-4">
                  <h4 class="card-title">Sunlimetech</h4>
                  <p class="card-text">This is basic card with image on top, title, description and button.This is basic card with image on top, title, description and button.This is basic card with image on top, title, description and button.</p>
                  <ul class="list-inline">
                    <li class="list-inline-item">
                      <a class="social-icon text-xs-center" target="_blank" href="#">
                        <i class="fa fa-facebook"></i>
                      </a>
                    </li>
                    <li class="list-inline-item">
                      <a class="social-icon text-xs-center" target="_blank" href="#">
                        <i class="fa fa-twitter"></i>
                      </a>
                    </li>
                    <li class="list-inline-item">
                      <a class="social-icon text-xs-center" target="_blank" href="#">
                        <i class="fa fa-skype"></i>
                      </a>
                    </li>
                    <li class="list-inline-item">
                      <a class="social-icon text-xs-center" target="_blank" href="#">
                        <i class="fa fa-google"></i>
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- ./Team member -->
    </div>
  </div>
</section>

JavaScript #

document.addEventListener('DOMContentLoaded', () => {
  const flipCards = document.querySelectorAll('.flip-card');
  flipCards.forEach(card => {
    card.addEventListener('click', () => {
      card.classList.toggle('hover');
    });
  });
});

How this works #

• We leverage your existing CSS flip styles by toggling the .hover class on click—no need to rewrite any animation code.
• classList.toggle() adds the class if it's missing, and removes it if it's present, creating a flip/unflip effect with each click.
• DOMContentLoaded ensures the script runs only after all page elements are loaded, so we don't try to select elements that don't exist yet.

内容的提问来源于stack exchange，提问作者Nardong Bagsik