JQuery removeclass addclass 在 ie 中不起作用

Question

我正在制作此概述，当您将鼠标悬停在图像上时，标题会显示在图像的底部。

它在除 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");
    });

有什么想法吗？提前致谢

编辑:标记错误 -> .标题位于.图像内，抱歉混淆。

Answer 1

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

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