Question

如何在达到某个div时删除CSS代码行？

请注意：

我需要包含这行代码的CSS类
点击页眉中的链接即可到达div，因此我认为mouseenter()事件不够。

我的代码：

＆＃13;

$(document).ready(function(){
    //firing the event to change CSS when reaching #resume 

    $('#resume').mouseenter(function() {
        $('#resume').class('education').css('border-bottom','');
    });
});

＆＃13;

.education, .work {
   margin-bottom: 48px;
   padding-bottom: 24px;
   //border-bottom: 1px solid #E8E8E8;
}

＆＃13;

   <section id="resume">
      <!-- Education -->
      <div class="row education">

         <div class="three columns header-col">
            <h1><span>Education</span></h1>
         </div>

         
         <div class="education work">
         </div> <!-- main-col end -->

      </div> <!-- End Education -->

＆＃13;

Answer 1

到达#resume时，您的意思是滚动？然后你需要使用$(window).scroll()函数/事件：

$(function () {
  // To change on scroll and reach `#resume`.
  $(window).scroll(function () {
    if ($(window).scrollTop() > $("#resume").offset().top)
      $('#resume').addClass('education').css('border-bottom', '0');
  });
  // To change when hovering.
  $('#resume').mouseenter(function () {
    $(this).addClass('education').css('border-bottom', '0');
    $(this).find(".education").css('border-bottom', '0');
  });
});

Answer 2

只需使用班级名称

$(document).ready(function(){
    // firing the event to change CSS when reaching #resume 
    $('#resume').mouseenter(function(){
    $('.education').css('border-bottom','');

});

Answer 3

答案是假设已经在元素上设置了类，并且您只想删除边框底部。

$(document).ready(function(){

    //firing the event to change CSS when reaching #resume 

    $('#resume').mouseenter(function(){
            //You can use 'this' as it is in the context of this element
            //It will look inside the context element, then find all elements with class "education" and set the border-bottom to none.
            $(this).find(".education").css({'border-bottom' : 'none'});

    });
});

Answer 4

您可以删除您的课程并添加包含正确css的新课程。

$(this).removeClass('someClass');
$(this).addClass('someClass');

否则你可以这样做：

$(this).css({'border-bottom' : ''});

当它位于元素

的上下文中时，您可以使用'this'

Answer 5

＆＃13;

$(document).ready(function() {

  var Bind = function(elem, event, func) {
      elem[window.addEventListener ? 'addEventListener' : 'attachEvent'](window.addEventListener ? event : 'on' + event, func, false);
    },
    scrollPos = function() {
      var doc = document.documentElement;
      return {
        'left': (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0),
        'top': (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0)
      };
    },
    tgtOffset = document.getElementById('tgt').offsetTop,
    scrolled = false,
    spotted = function() {
      var dist = tgtOffset - scrollPos().top,
        adj = window.innerHeight > (480 / 2) ? window.innerHeight : 100;
      return dist > -100 && dist < adj;
    },
    inView = null;
  var res = document.getElementById('resume');

  Bind(window, 'scroll', function(event) {
    clearTimeout(inView);
    if (!scrolled && spotted()) {
      inView = setTimeout(function() {
        res.classList.add('education');
      });
    }
  });
});

＆＃13;

.education,
.work {
  margin-bottom: 48px;
  padding-bottom: 24px;
  // border-bottom: 1px solid #E8E8E8;

}

＆＃13;

<section id="resume">
  <!-- Education -->
  <div class="row education">

    <div class="three columns header-col">
      <h1><span>Education</span></h1>
    </div>


    <div class="education work">
    </div>
    <!-- main-col end -->

  </div>
  <!-- End Education -->

＆＃13;

当div可见时更改元素CSS

5 个答案: