刪除父類的::之前的樣式

當子類被徘徊時，是否有方法在父類的父類之前添加樣式::？刪除父類的::之前的樣式

父類theme-preview有:: before屬性，它在懸停時顯示深色背景。

這裏是我的demo

我所做的是用這條線，但我不知道正確的代碼。它不起作用。

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

這是我想達到的。

更新：顯示子類「.popup-preview」時刪除`.theme-preview'樣式。

來源

2017-04-07 c.k

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>

來源

2017-04-07 02:05:26 repzero

不錯..但是這裏有一種方法，當彈出窗口自動顯示父類的e風格將刪除？ –

您希望從.theme-preview中刪除哪種樣式：在彈出窗口顯示之前？ – repzero

是的！當彈出窗口顯示時，.theme-preview：樣式將被刪除。所以我不需要彈出窗口的懸停就可以將其刪除。 –

創建具有所需::樣式之前，在這個例子中我「之前」使用名爲類的類：

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

來源

2017-04-07 02:07:40 SVTerziev

刪除父類的::之前的樣式

回答

相關問題