CODEWITHSUNDEEP
jqueryhtmlcss
user2245052
user2245052

Reputation: 19

JQuery removeclass addclass not working in ie

I'm making this overview where the title appears on the bottom of an image when you hover the image.

It's working fine in all browsers except internet explorer.

This is what I've got so far:
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");
    });

Any ideas? Thanks in advance

EDIT: error in mark-up -> .Title is inside .Image, sorry for mix-up.

Upvotes: 1

Views: 693

Answers (2)

WilliamStam
WilliamStam

Reputation: 307

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

you have the image as positioned relative. your .title is outside of the container so it wont "work" as expected

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

since your "container" is now positioned relative you can use absolute positioning.

after the edit.. i would use this isntead

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

unless you want the js stuff i dont think it will be needed

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

you also need to change the spans to divs

Upvotes: 1

Anton
Anton

Reputation: 32581

.Title element is a sibling of .Image, not a descendant. Use .siblings()

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

Upvotes: 2

Related Questions