Изменение jQuery .css background-position-x при зависании не работает в IE

Question

Итак, у меня есть веб-сайт с вкладками в верхней части, и вкладки меняются при наведении курсора на «всплывающие». Чтобы добиться этого, я использовал CSS-спрайт для вкладок и изменил положение фона при наведении курсора, используя jQuery, на соответствующую позицию y на спрайте.

HTML:

    <div id="tabs">
    <div id="tabs_bg" class="pngfix"></div>
    <a id="tabs_home" href="<?php echo $base; ?>/" style="width:67px;height:23px;top:17px;"></a>
    <a id="tabs_mission" href="<?php echo $base; ?>/mission/" style="width:73px;height:23px;top:17px;left:150px;"></a>
    <a id="tabs_style" href="<?php echo $base; ?>/style/" style="width:60px;height:23px;top:17px;left:226px;"></a>
    <a id="tabs_personality" href="<?php echo $base; ?>/personality/" style="width:108px;height:26px;top:14px;left:286px;"></a>
    <a id="tabs_projects" href="<?php echo $base; ?>/projects/" style="width:70px;height:26px;top:14px;left:396px;"></a>
    <a id="tabs_blog" href="/blog/" style="width:60px;height:36px;top:4px;left:466px;"></a>
    <a id="tabs_contact" href="<?php echo $base; ?>/contact/" style="width:73px;height:26px;top:14px;left:526px;"></a>
</div>

JQuery:

<script>
<!--MISSION TAB HOVER FUNCTION-->
$("#tabs_mission").hover(
  function () {
    $('#tabs').css("background", "url(../../../core/img/tabs/style_tabs.png");
    $('#tabs').css("background-position", "0px -46px");
  },
  function () {
    $('#tabs').css("background", "url(../../../core/img/tabs/style_tabs.png");
    $('#tabs').css("background-position", "0px 0px");
  }  
);

<!--HOME TAB HOVER FUNCTION-->
$("#tabs_home").hover(
  function () {
    $('#tabs').css("background", "url(../../../core/img/tabs/style_tabs.png");
    $('#tabs').css("background-position", "0px -92px");
  },
  function () {
    $('#tabs').css("background", "url(../../../core/img/tabs/style_tabs.png");
    $('#tabs').css("background-position", "0px 0px");
  }  
);

<!--PERSONALITY TAB HOVER FUNCTION-->
$("#tabs_personality").hover(
  function () {
    $('#tabs').css("background", "url(../../../core/img/tabs/style_tabs.png");
    $('#tabs').css("background-position", "0px -138px");
  },
  function () {
    $('#tabs').css("background", "url(../../../core/img/tabs/style_tabs.png");
    $('#tabs').css("background-position", "0px 0px");
  }  
);

<!--PROJECTS TAB HOVER FUNCTION-->
$("#tabs_projects").hover(
  function () {
    $('#tabs').css("background", "url(../../../core/img/tabs/style_tabs.png");
    $('#tabs').css("background-position", "0px -184px");
  },
  function () {
    $('#tabs').css("background", "url(../../../core/img/tabs/style_tabs.png");
    $('#tabs').css("background-position", "0px 0px");
  }  
);

<!--BLOG TAB HOVER FUNCTION-->
$("#tabs_blog").hover(
  function () {
    $('#tabs').css("background", "url(../../../core/img/tabs/style_tabs.png");
    $('#tabs').css("background-position", "0px -230px");
  },
  function () {
    $('#tabs').css("background", "url(../../../core/img/tabs/style_tabs.png");
    $('#tabs').css("background-position", "0px 0px");
  }  
);

<!--CONTACT TAB HOVER FUNCTION-->
$("#tabs_contact").hover(
  function () {
    $('#tabs').css("background", "url(../../../core/img/tabs/style_tabs.png");
    $('#tabs').css("background-position", "0px -276px");
  },
  function () {
    $('#tabs').css("background", "url(../../../core/img/tabs/style_tabs.png");
    $('#tabs').css("background-position", "0px 0px");
  }  
);
</script>

Это все прекрасно работает во всех браузерах, кроме IE. Я протестировал его во всех версиях IE, и он работает ни в одной. При наведении курсора на любую вкладку в IE вкладки просто исчезают, как если бы фоновое изображение было удалено.

Это сайт, на котором я это реализую - http://www.thatsbrave.co.uk

Спасибо

Answer 1

Здесь была проблема. Реально простой, один из тех, где вы пропускаете буквально один символ из строки кода, и он портится.

Вот исправление (которое я применил к каждой строке кода)

$('#tabs').css("background", "url(../../../core/img/tabs/style_tabs.png)");

Все, что было, это отсутствующая закрывающая скобка, перед "); в конце каждой строки, которая использовала селектор .css для установки фонового изображения. В основном закрывающая скобка, где определяется URL изображения, отсутствовала. Код работал хорошо в других браузерах, поэтому я предположил, что в этом нет ничего плохого, хотя я попробовал все другие вещи, прежде чем понять, что такое скобка!

Answer 2

У вас есть встроенный фоновый стиль css (background: 0px 0px;) в вашем div с идентификатором "tabs", который переопределяет ваш фоновый стиль из следующего класса:

.book_inner_home #tabs
{
    display : block;
    background : url(../img/tabs/home_tabs.png) no-repeat;
}

Я вижу это при проверке CSS с помощью инструментов разработчика IE.