0

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

查看投资组合项目上的“最近”标签：我的网站

在导航中切换类别以查看“最近”标签不会在 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);  
    }
4

2 回答 2

0

尝试复制适用于“.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%
    });
});
于 2010-01-20T20:10:09.040 回答
0

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

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);  
    }

不错的设计顺便说一句。

编辑：

你的代码：

$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%
    });
});

试试这个，它应该工作。

于 2010-01-21T12:25:20.687 回答