Change of class does not result in the new class's rules being applied in IE6??

I have a single image with 9 different states and the appropriate background-position rules set up as classes to show the different states. I can't use the :hover pseudo-selector because the background image being changed is not the same element that is being hovered over. I have defined the classes this way: #chooser_nav {width:580px; height:38px; background:transparent url(/assets/images/chooser-tabs.jpg) 0 0 no-repeat; margin-left:34px;} #chooser_nav.feat {background-position:0 0;} #chooser_nav.inv {background-position:0 -114px;} #chooser_nav.bts {background-position:0 -228px;} #chooser_nav.featinv {background-position:0 -38px;} #chooser_nav.featbts {background-position:0 -76px;} #chooser_nav.invfeat {background-position:0 -152px;} #chooser_nav.invbts {background-position:0 -190px;} #chooser_nav.btsfeat {background-position:0 -266px;} #chooser_nav.btsinv {background-position:0 -304px;} Then, using jQuery, I have a series of hover rules based on a previous click event (the here-undeclared "cur" variable is properly declared elsewhere): $("#featured_races a").hover(function(){ cur == "feat" ? $("#chooser_nav").attr("class", cur) : $("#chooser_nav").attr("class", cur+"feat"); }, function(){ $("#chooser_nav").attr("class", cur); }); $("#invitational_races a").hover(function(){ cur == "inv" ? $("#chooser_nav").attr("class", cur) : $("#chooser_nav").attr("class", cur+"inv"); }, function(){ $("#chooser_nav").attr("class", cur); }); $("#behind_the_scenes a").hover(function(){ cur == "bts" ? $("#chooser_nav").attr("class", cur) : $("#chooser_nav").attr("class", cur+"bts"); }, function(){ $("#chooser_nav").attr("class", cur); }); So, in Moz and WebKit browsers, this works fine. The classes are applied and the background image changes accordingly. Works in IE7 as well. However, in IE6, the background image never changes. The classes get applied appropriately, I verified this with the DOM viewer in MS's web dev tool. So, the jQuery is working. The class is getting applied, but no change is visibly occurring. I'm kinda stumped here... Help me, Crackoverflow... you're my only hope... EDIT: As far as className vs. setAttribute... the class is changing. attr("class", cur) is working. However, once the class is changed, the resulting rules are not applied visually... but the change of class is occurring. EDIT 2: As for jQuery's class-specific methods: I originally had them in the code, and the result was the same. Again, the problem is not with the class not getting applied to the element... this has been verified to be happening. it's that once the class is on the element, for some reason, the element is not following the CSS rules set for that class...
re. className vs. setAttribute, the problem might be a bug in IE that isn't actually changing the element class when you set the class attribute, only when you call class specific methods. That said, jQuerys class methods (eg. addClass) use this.

以上就是Change of class does not result in the new class's rules being applied in IE6??的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » HTML5 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏