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

有什么想法吗？提前致谢

编辑：加价错误 - ＆gt; .Title在里面。图片，抱歉混淆。

Answer 1

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

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

Answer 2

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

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

编辑后..我会使用这个isntead

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

除非你想要js的东西，我认为不需要它

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

您还需要将跨度更改为div

JQuery removeclass addclass在ie中不起作用

2 个答案: