删除父类的::之前的样式

时间：2017-04-07 01:35:52

标签： jquery html css

当子类被悬停时，有没有办法在父类之前添加::的样式？

父类theme-preview具有:: before属性，在悬停时显示深色背景。

这是我的demo

我所做的就是使用这一行，但我不知道正确的代码。它不起作用。

 $('.popup-preview').on('mouseover', function(){
            $(this).closest(".theme-preview::before").css({'visibility': 'hidden', 'opacity': '0' });       
 });

这是我想要实现的目标。

更新：在显示其子类'.popup-preview'时删除`.theme-preview'的样式。

2 个答案:

答案 0 :(得分：1)

创建一个具有所需::之前样式的类，对于此示例，我使用名为＆＃34;的类＆＃34;：

$('.popup-preview').on('mouseover', function () {
  $(this).parent('.theme-preview').addClass('before');
});
$('.popup-preview').on('mouseout', function () {
  $(this).parent('.theme-preview').removeClass('before');
});

答案 1 :(得分：0)

css方法是在该主题标题上设置无指针事件。因此，它不会允许悬停事件发生在它上面。

.popup-preview{
  pointer-events:none;
}

下面的代码段

$('.theme-preview').click(function() {

  var previewPopup = $(this).children('.popup-preview');
  var dim = $('#dim-bg');

  if (previewPopup.is(":visible")) {
    previewPopup.hide();
    dim.hide();

  } else {
    dim.show();
    $('.popup-preview:visible').fadeOut();
    previewPopup.fadeIn("slow");

    previewPopup
      .css({
        "position": "fixed",
        "top": ($(window).height() / 2) - (previewPopup.outerHeight() / 2),
        "left": ($(window).width() / 2) - (previewPopup.outerWidth() / 2)
      });
  }

  return false;
});



$('#dim-bg').click(function() {
  //$('#dim-bg').hide();
  var previewPopup = $('.theme-preview').children('.popup-preview');
  var dim = $(this);

  if (previewPopup.is(":visible")) {
    previewPopup.hide();
    dim.hide();
  }
  return false;
});
$('.popup-preview').hover(function() {
  $(this).closest(".theme-preview::before").css({
    'visibility': 'hidden',
    'border': 'solid red'
  });
});
.col-md-6 {
  float: left;
}

#dim-bg {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: none;
}

.theme-preview::before {
  visibility: hidden;
  opacity: 0;
  text-align: center;
  transition: visibility 0s, opacity 0.5s linear;
  content: 'Click to select';
  position: absolute;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.5);
  width: 94%;
  height: 94%;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 10px;
  z-index: 1;
}

.theme-preview:hover::before {
  visibility: visible;
  opacity: 1;
}

.popup-preview {
  pointer-events: none;
}

.popup-preview {
  background: #fff;
  position: fixed;
  z-index: 1;
  display: none;
  box-shadow: 0 10px 20px rgba(35, 50, 56, 0.3);
  max-width: 400px;
  border-radius: 4px;
  height: auto;
}

.theme-preview {
  position: relative;
  padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">

  <div class="col-md-6 col-sm-6">
    <div class="theme-preview">
      <img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-6.jpg">

      <div class="popup-preview">
        <div class="title">THEME</div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-6.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-6 col-sm-6">
    <div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-4.jpg">
      <div class="popup-preview">
        <div class="title">THEME</div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-4.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-6 col-sm-6">
    <div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-3.jpg">
      <div class="popup-preview">
        <div class="title">THEME</div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-3.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-6 col-sm-6">
    <div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-5.jpg">
      <div class="popup-preview">
        <div class="title">THEME</div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-5.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>
  </div>

</div>

<br /><br />

<div class="row">

  <div class="col-md-6 col-sm-6">
    <div class="theme-preview">
      <img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-6.jpg">

      <div class="popup-preview">
        <div class="title">THEME</div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-6.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>
  </div>


  <div class="col-md-6 col-sm-6">
    <div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-4.jpg">
      <div class="popup-preview">
        <div class="title">THEME</div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-4.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>
  </div>



  <div class="col-md-6 col-sm-6">
    <div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-3.jpg">
      <div class="popup-preview">
        <div class="title">THEME</div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-3.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>
  </div>


  <div class="col-md-6 col-sm-6">
    <div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-5.jpg">
      <div class="popup-preview">
        <div class="title">THEME</div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-5.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>
  </div>

</div>

<br /><br />

<div class="row">

  <div class="col-md-6 col-sm-6">
    <div class="theme-preview">
      <img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-6.jpg">

      <div class="popup-preview">
        <div class="title">THEME </div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-6.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>
  </div>


  <div class="col-md-6 col-sm-6">
    <div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-4.jpg">
      <div class="popup-preview">
        <div class="title">THEME</div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-4.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>
  </div>



  <div class="col-md-6 col-sm-6">
    <div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-3.jpg">
      <div class="popup-preview">
        <div class="title">THEME</div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-3.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>
  </div>


  <div class="col-md-6 col-sm-6">
    <div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-5.jpg">
      <div class="popup-preview">
        <div class="title">THEME</div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-5.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>
  </div>

</div>



<div>
  <br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div id="dim-bg">
</div>

相关问题
最新问题