изменения изображения при наведении курсора мыши в Internet Explorer

EDIT 10:04 PM Я РЕШИЛ ЭТОизменения изображения при наведении курсора мыши в Internet Explorer

Да, я понял это, но форум программного обеспечение здесь не позволяет мне не оставлять ответ на свой вопрос до 8 часов Истек. Во всяком случае, я нашел решение here. Он использует чистый HTML-подход, и я успешно тестировал его во всех 5 браузерах. Просто нужно было положить в HTML: <img src="starter1.jpg" onmouseover="this.src='starter2.jpg'" onmouseout="this.src='starter1.jpg'" />

Я пытаюсь создать страницу (в конечном счете, несколько страниц) с участием этого:

1) изображение загружается по умолчанию при загрузке страницы. 2) Когда вы наводите курсор мыши, немного другое изображение загружается. 3) Когда вы отодвигаетесь от него, оно возвращается к исходному изображению.

Я понял, что это было легко с небольшим CSS, и это так, за исключением случаев, когда дело доходит до Internet Explorer. Вот что у меня есть (это как раз показывает 2 фотографии разбитого стартера от моего автомобиля):

<html> 
    <head> 
     <style> 
      #pic1 
      { 
       width:500px; 
       height:500px; 
       background:url("starter1.jpg")no-repeat; 
      } 
      #pic1:hover 
      { 
       background:url("starter2.jpg")no-repeat; 
      } 

     </style> 
    </head> 
    <body> 
     <div id="pic1"></div> 
    </body> 
</html>

Это прекрасно работает в Firefox, Chrome, Safari и Opera, но не в Internet Explorer 8. В самом деле, в IE8 не загружаются изображения. Я просто получаю пустой белый экран. Мне не хватает деталей? Есть ли способ заставить это работать на всех браузерах? Я прочитал что-то об обертке в ярлыке привязки, но ничего не сделал.

EDIT:

Я не могу комментировать любой пост без кода глядя страшно, так что здесь идет. Я пробовал:

<html> 
<head> 
    <style> 
     #pic1 
     { 
      width: 500px; 
      height: 500px; 
      background:url(starter1.jpg); 
      no-repeat; 
     } 
     #pic1:hover 
     { 
      width: 500px; 
      height: 500px; 
      background:url(starter1.jpg); 
      no-repeat; 
     } 
    </style> 
</head> 
<body> 
    <div id="pic1"></div> 
</body> 
</html>

Теперь первое изображение появляется, но наведите курсор на изображение. IE продолжает говорить мне: «Чтобы защитить вашу безопасность, Internet Explorer заблокировал этот веб-сайт от отображения содержимого с ошибками сертификата безопасности». как только я открою (IE, прежде чем перейти на страницу с моими фотографиями), спросит, хочу ли я просматривать только контент, который был доставлен надежно. Я всегда просто говорю «Нет».

Наконец, если я пытаюсь это:

<html> 
<head> 
    <style> 
    #pic1 
    { 
      background: #FFFFFF url(starter1.jpg) no-repeat fixed center; 
    } 
    #pic1:hover 
    { 
      background: #FFFFFF url(starter2.jpg) no-repeat fixed center; 
    } 
    </style> 
</head> 
<body> 
    <div id="pic1"></div> 
</body>

я не получаю ничего, нет изображения любого типа в любом браузере.

источник

2013-10-01 mstabosz

Используйте Firebug, если вы пытаетесь устранить эти проблемы, поджигателем является удивительно полезный инструмент, вы также можете просто щелкнуть правой кнопкой мыши и проверить элемент. – Cam

Необходимо использовать правильный синтаксис. Вот правильный синтаксис.

элемент {

фон:

#fff 

url(image.png) 

no-repeat 

20px 100px 

fixed;

}

Уведомления нет двойных кавычек ("")

источник

2013-10-01 23:48:05 Cam

Спасибо. Я сделал некоторые изменения выше, потому что форматирование в этих блоках комментариев засасывает. Он все еще не работает. – mstabosz

Если вы можете разместить это на jsfiddle.net, я мог бы взглянуть и сообщить вам, где ваша ошибка. – Cam

изменения изображения при наведении курсора мыши в Internet Explorer

ответ

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