针对此课程和课程未按预期工作

时间：2018-09-13 17:25:35

标签： javascript jquery html css

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

我尝试过没有运气：

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

Live version on codepen

2 个答案:

答案 0 :(得分：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'的所有元素中，而只需添加到当前倾斜卡中的其中一个

答案 1 :(得分：0)

Working codepen 。

发生这种情况是因为鼠标悬停在下面，您正在使用类选择器$('.description-overlay')，它将选择该类的所有元素并添加/删除类desc-hover。

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

应使用$(this)来定位每个按钮的相关.description-overlay div：

//show details
$(".faction-more-btn").hover(
  function() {
    $(this).siblings(".description-overlay").addClass('desc-hover');
  },
  function() {
    $(this).siblings(".description-overlay").removeClass('desc-hover');
  }
);

注意：：您尝试过的两个功能都无法正常工作，因为当div是button的同级对象时，它们都位于当前悬停的按钮内。可以使用siblings()函数或parent()/closest()方法和find()的组合，例如：

$(this).parent().find(".description-overlay");
$(this).closest('.tilt-card').find(".description-overlay");
$(this).siblings(".description-overlay")
相关问题
最新问题