Почему этот Javascript не работает в IE

У меня есть часть кода в Javascript, которая работает в Chrome и Firefox, но не работает в IE. Код, который должен изменить фоновый рисунок CSS, когда мышь навевает некоторый div и удаляет фоновое изображение, когда мышь отсутствует.Почему этот Javascript не работает в IE

Javascript:

$(document).ready(function() { 
    $('.expositores1').hover(function() { 
     $('.expositores1').css('background-image', 'url(/wp-content/themes/kallyas/images/mapa/piso0/inter_piso0_r5_c2_f4.jpg)', 'background-repeat', 'no-repeat'); 
     $('.expositores2').css('background-image', 'url(/wp-content/themes/kallyas/images/mapa/piso0/inter_piso0_r12_c2_f2.jpg)', 'background-repeat', 'no-repeat'); 
     $('.expositores3').css('background-image', 'url(/wp-content/themes/kallyas/images/mapa/piso0/inter_piso0_r12_c4_f2.jpg)', 'background-repeat', 'no-repeat'); 
     $('.expositores4').css('background-image', 'url(/wp-content/themes/kallyas/images/mapa/piso0/inter_piso0_r14_c3_f2.jpg)', 'background-repeat', 'no-repeat'); 
    }); 
    $('.expositores1').mouseout(function() { 
     $('.expositores1').css('background-image', 'none'); 
     $('.expositores2').css('background-image', 'none'); 
     $('.expositores3').css('background-image', 'none'); 
     $('.expositores4').css('background-image', 'none'); 
    }); 
});

HTML:

<div class="expositores1"></div> 
<div class="expositores2"></div> 
<div class="expositores3"></div> 
<div class="expositores4"></div>

CSS:

.expositores1{ 
    position: absolute; 
    width: 306px; 
    height: 122px; 
    margin-left: 11px; 
    margin-top: 146px; 
} 
.expositores2{ 
    position: absolute; 
    width: 81px; 
    height: 127px; 
    margin-left: 11px; 
    margin-top: 268px; 
} 
.expositores3{ 
    position: absolute; 
    width: 185px; 
    height: 127px; 
    margin-left: 132px; 
    margin-top: 268px; 
} 
.expositores4{ 
    position: absolute; 
    width: 40px; 
    height: 90px; 
    margin-left: 92px; 
    margin-top: 304px; 
}

Любой человек может помочь? Почему он работает в Chrome и Firefox, но не работает в IE?

С уважением, Hugo

источник

2013-07-03 Hugo Sousa

Когда вы говорите, что не работаете, какая часть не работает? Вы видите изображение или нет, проблема с мышью или мышью? – Neil

Какие версии IE вы пробовали до сих пор? – morgano

Я использую IE10. Что не работает, это зависание. Итак, я нахожу div div, и фоновое изображение не изменяется. –

Вы используете JQuery css() функцию неправильно.

Если вы хотите установить только одно свойство, используйте: .css('prop', 'value').

Если вам необходимо установить сразу несколько свойств, вам необходимо передать object. и в вашем случае:

.css({ 
    'background-image':'url(/wp-content/themes/kallyas/images/mapa/piso0/inter_piso0_r5_c2_f4.jpg)', 
    'background-repeat':'no-repeat' 
    });

Кроме того, как @Miro Маркарян pointed out, вы действительно должны полагаться на CSS :hover директивы для достижения этой цели, а не JavaScript.

источник

2013-07-03 10:50:49 haim770

Это правда, но тогда почему OP обнаруживает, что он «работает» в некоторых браузерах? (Я бы ожидал, что jQuery просто проигнорирует дополнительные аргументы и использует первые два, хотя я не проверял код.) – nnnnnn

Я только что проверил, и действительно jQuery просто игнорирует дополнительные параметры. – haim770

@nnnnnn Ну ... Я думаю, что может быть много факторов, которые отвечают за то, что работает в одном браузере и не работает в другом. Например, [я борюсь с очень похожей проблемой] (http://stackoverflow.com/questions/17424828/chrome-firefox-doesnt-display-images-in-objects-shown-in-beforeunload-event), где изображение не отображается в FF/Chrome, но в IE. – trejder

Это может быть сделано на самом деле проще с помощью CSS hover селектор .. CSS уже что реализован ..

Вы своего рода заново изобретать колесо.

Просто добавьте, что вы хотите, чтобы это произошло, когда вы hover к hover селектор этого CSS элемента:

.expositores1{ 
    position: absolute; 
    width: 306px; 
    height: 122px; 
    margin-left: 11px; 
    margin-top: 146px; 
    background-color: #F00; 
} 
.expositores1:hover { 
    background-color: #00F; 
}

и лучше ваш браузер переключится обратно в нормальный селектор после перемещения мыши из .. Нет необходимости иметь javascript для этого.

JsFiddle Я создал для вас.

источник

2013-07-03 10:55:29

Но как насчет изменения фона остальных трех div (все на основе зависания над первым)? – nnnnnn

На самом деле я не могу делать .expositores: наведите указатель мыши, потому что я хочу изменить несколько фоновых изображений и с помощью .expositores: зависает, это изменит только «этот» div. –

Hugo - вы можете изменить все фоны при наведении первого: http://jsbin.com/isequv/1/edit (при условии, что рассматриваемые divs являются братьями и сестрами, как показано в вопросе). – nnnnnn

Почему этот Javascript не работает в IE

ответ

Смежные вопросы