javascript - Target This 和 Class 没有按预期工作

Question

出于某种原因，正如您在我的笔中看到的那样，当我将鼠标悬停在“了解更多”按钮上时，它会将详细信息类添加到所有卡片中。

我试过没有运气：

$(this).find('element')

和 ：

('', this)

//slick slider
$('.responsive').slick({
  dots: true,
  prevArrow: $('.prev'),
  nextArrow: $('.next'),
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [{
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});


//tilt
$('.tilt-card').tilt({
  perspective: 1000,

})

//show details
$(".faction-more-btn").hover(
  function() {

    $('.description-overlay').addClass('desc-hover');
  },
  function() {
    $(".description-overlay").removeClass('desc-hover');
  }
);

$(document).ready(function() {
  $('button').hover(function() {
    $(this).text('Read More');
  }, function() {
    $(this).text('Learn More');
  });
});

//scroll text
$(document).ready(function() {
  var count;
  var interval;

  $(".faction-more-btn").on('mouseover', function() {
    var div = $('.description-container');

    interval = setInterval(function() {
      count = count || 1;
      var pos = div.scrollTop();
      div.scrollTop(pos + count);
    }, 100);
  }).click(function() {
    if (count < 6) {
      count = count + 1;
    }
  }).on('mouseout', function() {
    // reset the speed on out
    count = 0;
    clearInterval(interval);
    $(".description-container").scrollTop(0);
  });
});

* {
  font-family: 'Exo', sans-serif;
}

body {
  background: url("https://mankindreborn.com/wp-content/uploads/2018/04/newBG.jpg");
  background-size: cover;
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.container {
  padding-top: 100px;
}

img {
  width: 100%;
  height: 400px;
  padding: 5px;
}

h2 {
  text-align: center;
  padding-bottom: 1em;
}

.slick-dots {
  text-align: center;
  margin: 0 0 10px 0;
  padding: 0;
  li {
    display: inline-block;
    margin-left: 4px;
    margin-right: 4px;
    &.slick-active {
      button {
        background-color: black;
      }
    }
    button {
      font: 0/0 a;
      text-shadow: none;
      color: transparent;
      background-color: #999;
      border: none;
      width: 15px;
      height: 15px;
      border-radius: 50%;
    }
     :hover {
      background-color: black;
    }
  }
}


/* Custom Arrow */

.prev {
  color: #999;
  position: absolute;
  top: 38%;
  left: -2em;
  font-size: 1.5em;
   :hover {
    cursor: pointer;
    color: black;
  }
}

.next {
  color: #999;
  position: absolute;
  top: 38%;
  right: -2em;
  font-size: 1.5em;
   :hover {
    cursor: pointer;
    color: black;
  }
}

@media screen and (max-width: 800px) {
  .next {
    display: none !important;
  }
}


/* the slides */

.slick-slide {
  margin: 0 10px;
}


/* the parent */

.slick-list {
  margin: 0 -10px;
}

.slide {
  position: relative;
}

.tilt-card {
  overflow: visible;
  transform-style: preserve-3d;
}

.faction-char-img {
  width: 85%;
  height: auto;
  transform: translateZ(30px);
  overflow: visible;
}

.faction-char-con {
  position: absolute;
  bottom: 0px;
}

.faction-logo-con {
  position: absolute;
  top: 10px;
}

.faction-logo {
  width: 70%;
  height: auto;
  transform: translateZ(20px);
  overflow: visible;
  float: right;
  margin-right: 10px;
}

.nsm-overlay {
  position: absolute;
  width: 96%;
  margin-left: 6px;
  top: 4px;
  height: 200px;
  background: url('https://i.imgur.com/xBr7FM1.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: right;
  transform: translateZ(30px);
}

.foe-overlay {
  position: absolute;
  width: 98%;
  margin-left: 3px;
  top: 4px;
  height: 200px;
  background: url('https://i.imgur.com/tyF6AgV.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: right;
  transform: translateZ(30px);
}

.faction-more-btn {
  position: absolute;
  bottom: 20px;
  margin-left: 53%;
  z-index: 100;
  transform: translateZ(50px);
  background-color: #212121cc;
  border: none;
  color: #585858;
  padding: 10px 20px 10px;
}

.faction-more-btn:hover {
  background-color: #68ddda;
  color: #000;
}

.description-overlay {
  position: absolute;
  width: 97%;
  margin-left: 4px;
  bottom: 0px;
  height: 0%;
  background-color: #0e0e0ef5;
  z-index: 99;
  transform: translateZ(37px);
  transition: height 0.5s;
  -webkit-transition: height 0.5s;
  color: #fff;
  padding-left: 25px;
  padding-left: 25px;
}

.description-container {
  margin-top: 20px;
  overflow-y: scroll;
  height: 185px;
  padding-right: 20px;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
}

.description-container::-webkit-scrollbar {
  display: none;
}

.desc-hover {
  position: absolute;
  width: 97%;
  margin-left: 4px;
  bottom: 0px;
  height: 100%;
  background-color: #0e0e0ea6;
  z-index: 99;
  transform: translateZ(37px);
  transition: height 0.5s;
  -webkit-transition: height 0.5s;
}

.description-overlay h2 {
  text-align: left;
  font-size: 20px;
  margin-top: 30px;
  padding-right: 10px;
}

.faction-type {
  color: #68ddda;
  margin-top: -25px;
}

.faction-details {
  font-size: 10px;
}

.foe-tower {
  position: absolute;
  top: 0px;
  height: 100%;
  width: auto;
  transform: translateZ(20px);
}

.foe-logo {
  margin-right: -8px;
  margin-top: -9px;
}

.nsm-img {
  width: 70%;
}

.nsm-logo {
  margin-top: -10px;
  width: 65%
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/gijsroge/tilt.js/38991dd7/dest/tilt.jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.5/slick.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.5/slick.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">

  <div class="row">
    <div class="col-md-12 heroSlider-fixed">
      <div class="overlay">
      </div>
      <!-- Slider -->
      <div class="slider responsive">
        <div class="tilt-card slide">
          <img src="https://i.imgur.com/eHkER1D.jpg">
          <div class="nsm-overlay"></div>
          <div class="description-overlay">
            <h2>NORTH STAR MINING</h2>
            <p class="faction-type">MEGACORP</p>
            <p class="faction-details"><b>BASED:</b> Upper Copper City, Venus, Sol.</p>
            <p class="faction-details"><b>FOUNDED:</b> -</p>
            <div class="description-container">
              <br><br>
              <p>One of the oldest corporations still in existence and one of the Big Three Megacorps, North Star Mining has its origins on pre-space Earth. In 2045, a former mine supervisor for SA Mines named Dawie Copper took advantage of the privatisation
                of his former employers and purchased several palladium mines in South Africa. By the start of the Second Space Race in 2075, the Copper Mining Group (CMG), owned almost all of the mines in South Africa and Copper’s son Anton had taken
                the reins of the company...</p>
            </div>
            <p class="learn-more-text"></p>
          </div>
          <div class="faction-logo-con">
            <img class="faction-logo nsm-logo" src="https://i.imgur.com/9GiEkjB.png">
          </div>
          <button class="faction-more-btn">Learn More</button>
          <div class="faction-char-con">
            <img class="faction-char-img nsm-img" src="https://i.imgur.com/nOpzEfF.png">
          </div>

        </div>
        <div class="tilt-card slide">
          <img src="https://i.imgur.com/urJ0pyz.png">
          <img class="foe-tower" src="https://i.imgur.com/jm9Gjvw.png">
          <div class="foe-overlay"></div>
          <div class="description-overlay">
            <h2>FOLLOWERS OF ETERNITY</h2>
            <p class="faction-type">ANARCHO-TERRORISTS</p>
            <p class="faction-details"><b>BASED:</b> Unknown, speculated near New Terra</p>
            <p class="faction-details"><b>FOUNDED:</b> -</p>
            <div class="description-container">
              <br><br>
              <p>The slums of Earth’s Mega-Cities proved to be the perfect breeding ground for fanaticism and dissent. The Followers of Eternity have no grounded history; their origin is fragmented amongst the various slums from where they came. The faction
                started life as a quasi-charity group sometime in the early 22nd century seeking to improve the lives of those who lived in the squalled urban centers; they soon realized that real change would only come through anarchy. The 'charity'
                organized into street gangs and set up 'education hubs' from which their movement gained a mass following amongst the young, oppressed low entry union workers and the many forgotten who dwell at street level. The group's aim is simple,
                resist the Union and their corrupt corporate masters - modeling themselves as 'enlightened anarchists' out to smash the system...</p>
            </div>
            <p class="learn-more-text"></p>
          </div>
          <div class="faction-logo-con">
            <img class="faction-logo foe-logo" src="https://i.imgur.com/y3gH30H.png">
          </div>
          <button class="faction-more-btn">Learn More</button>
          <div class="faction-char-con">
            <img class="faction-char-img" src="https://i.imgur.com/x45t5zh.png">
          </div>



        </div>
        <div class="tilt-card">
          <img src="http://placehold.it/200x150" alt="" />
        </div>
        <div class="tilt-card">
          <img src="http://placehold.it/200x150" alt="" />
        </div>
        <div class="tilt-card">
          <img src="http://placehold.it/200x150" alt="" />
        </div>
        <div class="tilt-card">
          <img src="http://placehold.it/200x150" alt="" />
        </div>
        <div class="tilt-card">
          <img src="http://placehold.it/200x150" alt="" />
        </div>
        <div class="tilt-card">
          <img src="http://placehold.it/200x150" alt="" />
        </div>
      </div>
      <!-- control arrows -->
      <div class="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      </div>
      <div class="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      </div>

    </div>
  </div>
</div>

Codepen 上的实时版本

标签： javascriptjqueryhtmlcss

Answer 1

这是你想要的：

$(this).closest('.tilt-card').find('.description-overlay').addClass('desc-hover');

代替

$('.description-overlay').addClass('desc-hover');

https://codepen.io/anon/pen/zJaPbQ

您的问题是您正在使用 css 类“description-overlay”向所有元素添加类，您只需添加到当前倾斜卡内的一个