JQuery removeclass addclass在ie中不起作用

我在做这个概述，当鼠标悬停在图像上时，标题出现在图像的底部。JQuery removeclass addclass在ie中不起作用

它在所有浏览器中都能正常工作，除了Internet Explorer。

这是我到目前为止有：
HTML：

<div class="category"> 
     <a href="?pageId"> 
     <span class="Image"><img src="image.jpg" /> 
      <span class="Title">Page Title</span> 
     </span> 
     </a> 
    </div>

CSS：

.category {width:220px; float:left; margin-right:20px;} 
    .category a .Image {position:relative; } 
    .category a .Image img {display:block; width:220px; height:auto;} 
    .category a .Title {display:none;} 
    .category a .viewTitle {display:block; height:40px; padding:5px 10px; position:absolute; top:-50px;}

的jQuery：

$(".category a .Image").hover(function(){ 
     $(this).find('.Title').addClass("viewTitle"); 
    }, function() { 
     $(this).find('.Title').removeClass("viewTitle"); 
    });

任何想法？在此先感谢

编辑：标记中的错误 - > .Title是内部.Image，对不起混淆。

来源

2014-09-23 user2245052

哪个版本的IE？ – 2014-09-23 08:19:27

只是检查其他CSS不会影响你正在添加和删除类的风格。尝试使用！重要的样式.. – 2014-09-23 08:21:42

在IE版本10 + 11测试 – user2245052 2014-09-23 08:26:27

.category {width:220px; float:left; margin-right:20px; position: relative;}

你的形象定位相对。您.title是容器外，因此不会“工作”预期

.category a .viewTitle {display:block; height:40px; padding:5px 10px; position:absolute; top:0; left:0; right:0;}

，因为你的“容器”相对现在的定位，你可以使用绝对定位。

编辑后..我会除非你想要的东西，JS我不认为这将需要

http://jsbin.com/wumup/1/edit?html,css,output

你还需要使用这个isntead

.Title { display:none; } 
.Image:hover .Title { display:block; }

将跨度更改为div

来源

2014-09-23 08:27:32 WilliamStam

看到我上面的第二部分..你甚至不需要JS的。只是使用CSS。只是把它放在'.Title'中。 – WilliamStam 2014-09-23 08:29:01

不是.Image（position：relative）充当.viewTitle的'容器'吗？编辑和回答混合 – user2245052 2014-09-23 08:37:06

我添加了一个jsbin例如它..我的猜测是跨度让你四处乱动。 http://jsbin.com/wumup/1/edit?html,css,output你已经在类别上使用了float，所以它和inline一样好。你也可以把它改成'.category a .Image img {width：220px;高度：自动;}'（高度 - 我只是指定它进行测试） – WilliamStam 2014-09-23 08:42:13

.Title元素是.Image的兄弟，而不是后代。使用.siblings()

$(".category a .Image").hover(function(){ 
    $(this).siblings('.Title').addClass("viewTitle"); 
}, function() { 
    $(this).siblings('.Title').removeClass("viewTitle"); 
});

来源

2014-09-23 07:49:50 Anton

.siblings无法正常工作。我注意到我的标记有误。 .Title在里面。图像。修正它在例子中很抱歉混淆。 – user2245052 2014-09-23 08:05:41

更新你的答案，因为现在这不是现在的问题的答案... – 2014-09-23 08:45:35

JQuery removeclass addclass在ie中不起作用

回答

相关问题