Question

为什么覆盖图像（嵌套div）与父div一起消失？仅在EXPLORER中出现问题..

查看投资组合项目的“近期”标签：My website

在导航中切换类别，以查看“最近的”标签在Internet Explorer中不会淡出

这是html：

<div class="art recent">
   <div class="recentlabel"><img src="images/Recent-label.png" /></div>
    <a href="images/art/1.jpg" rel="lightbox" title=""> <img border="0" src="images/art/1tn.jpg" width="190" height="263" /></a><p>ARTIST<br />     artwork</p>
  </div>

这是css：

.art  {
   width: 190px;
   padding: 0px;
   margin: 5px;
   float: left;
   background:#2c313b;
   display: inline;
    -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
  border-radius: 5px;
}

.recentlabel {
 position:absolute;
 margin-top:-2px;
 margin-left:97px;
 width:95px;
 height:95px;
}

.recent {
}

这就是jquery：

var $j = jQuery.noConflict();$j(document).ready(function(){    
    $j(".art").css({opacity: 0});   // Loaded at 0 opacity
    $j(".art").fadeTo(900, 0.8);    // Onload fade items to 80%

    $j(".art").hover(function(){
  if(!$j(this).hasClass("hidden")){
    $j(this).fadeTo("fast", 1.0); }  // Rollover at 100%
    },function(){
  if(!$j(this).hasClass("hidden")){
    $j(this).fadeTo("fast", 0.8); }  // Rollout at 80%
    });
});

请帮忙！我想不出来.. PS：我对jQuery / Javascript没什么经验，所以请清楚解释..谢谢！

- 编辑 - 以下是jquery类别切换器代码：

$(document).ready(function() { 

    $('ul#navfilter a').click(function() {

        $(this).css('outline','none');
        $('ul#navfilter .current').removeClass('current');
        $(this).parent().addClass('current');

        var filterVal = $(this).text().toLowerCase().replace(' ','-');      

        if(filterVal == 'alles') {
            $('.wrap .hidden').fadeTo('slow' ,0.8).removeClass('hidden');

        } else {


            $('.wrap .masonryWrap > div').each(function() {                                
                if(!$(this).hasClass(filterVal)) {      
                    $(this).fadeTo('slow' ,0.08).addClass('hidden');

                } else {
                    $(this).fadeTo('slow' ,0.8).removeClass('hidden');
                }
            });
        }
        return false;
    });
});

- 编辑 - 导航类别过滤器的代码，对于'recentlabel'透明度为'0.99'：

if(filterVal == 'alles') {
            $('.wrap .hidden').fadeTo('slow' ,0.8).removeClass('hidden');
            $('.recentlabel').fadeTo(400, 0.99);

        } else {


            $('.wrap .masonryWrap > div').each(function() {                                
                if(!$(this).hasClass(filterVal)) {      

    $(this).fadeTo('slow' ,0.08).addClass('hidden');  

    if (filterVal!='recent') 
      $(this).find('.recentlabel').fadeTo(400, 0);
    } else {  
      $(this).fadeTo('slow' ,0.8).removeClass('hidden');  
      $(this).find('.recentlabel').fadeTo(400, 0.99);  
    }

Answer 1

尝试复制适用于“.art .recentlabel”的选择器“.art”，并调用选择器以明确淡出。

实施例

var $j = jQuery.noConflict();$j(document).ready(function(){    
    $j(".art").css({opacity: 0});   // Loaded at 0 opacity
    $j(".art").fadeTo(900, 0.8);    // Onload fade items to 80%
    $j(".art .recentlabel").css({opacity: 0});   // Loaded at 0 opacity
    $j(".art .recentlabel").fadeTo(900, 0.8);    // Onload fade items to 80%

    $j(".art").hover(function(){
  if(!$j(this).hasClass("hidden")){
    $j(".art .recentlabel").fadeTo("fast", 1.0); }  // Rollover at 100%
    },function(){
  if(!$j(this).hasClass("hidden")){
    $j(".art .recentlabel").fadeTo("fast", 0.8); }  // Rollout at 80%
    });
});

Answer 2

我建议硬编码（+/-）标签隐藏，即：

if(!$(this).hasClass(filterVal)) {      
    $(this).fadeTo('slow' ,0.08).addClass('hidden');  
    if (filterVal!='recent')  
      $(this).find('.recentlabel').fadeTo('slow', 0.08);
    } else {  
      $(this).fadeTo('slow' ,0.8).removeClass('hidden');  
      $(this).find('.recentlabel').fadeTo('slow', 0.8);  
    }

很好的设计btw。

修改

您的代码：

$j(".art").hover(function(){ if(!$j(this).hasClass("hidden")){ $j(this).fadeTo("fast", 1.0); } // Rollover at 100% },function(){ if(!$j(this).hasClass("hidden")){ $j(this).fadeTo("fast", 0.8); } // Rollout at 80% }); });

已编辑的代码（我将最大alpha设置为0.99，因此我无需检查浏览器，眼睛也不会看到差异）：

$j(".art").hover(function(){ if(!$j(this).hasClass("hidden")){ $j(this).fadeTo("fast", 0.99); } // Rollover at [100%] - A.K.: 99% },function(){ if(!$j(this).hasClass("hidden")){ $j(this).fadeTo("fast", 0.8); } // Rollout at 80% }); });

试试这个，它应该有效。

资源管理器和褪色图像在覆盖DIV'问题

2 个答案: