2016-07-06 3 views
0

Я пытаюсь сделать очень простой CSS-зависание. Он отлично работает в IE, Edge, Chrome и Firefox, но не работает для Safari (9.1) на Mac.CSS hover не работает на Safari

Ищите в Интернете и переполнение стека для исправления, но без радости.

Нашел этот простой пример на codepen. Это работает на сафари.

НО: Если я возьму этот код, поместите его в простой html-документ и подавайте его с Azure, он не работает при наведении указателя мыши. Вы должны щелкнуть/отключить элемент для бит, который должен отображаться при наведении. Как ни странно, если я использую веб-инспектор и переключаю состояние зависания, он работает. Пример кода:

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta charset="utf-8" /> 
    <style> 
     #thumbnail { 
      display: block; 
      width: 150px; 
      height: 150px; 
     } 

      #thumbnail:hover + #title { 
       display: block; 
      } 

     #title { 
      display: none; 
      color: #ffffff; 
      background-color: #000000; 
      text-align: center; 
      width: 130px; 
      padding: 10px; 
     } 
    </style> 


</head> 
<body> 

    <a id="thumbnail" href="#"><img src="http://dummyimage.com/150x150/0066ff/fff"></a> 
    <div id="title">filename.jpg 1</div> 
</body> 
</html> 

Затем я создал plnkr, чтобы увидеть, если что-то дополнительно происходит в codepen. Plunk также работает в Safari на Mac.

Что мне нужно сделать, чтобы заставить его работать на стандартной странице, пожалуйста?

+1

Работает над Safari 9..1.1 (OS X 10.11.5). Я протестировал CodePen, ссылку Plnkr и примерный код, который вы вставили. –

+0

Просто хочу обновить os/browser сейчас .... – HockeyJ

+0

Спасибо @RobertC. Ответ состоял в том, чтобы обновить Mac OS X до 10.11.5. Я все еще не уверен, что делать, чтобы люди не столкнулись с проблемой в первую очередь. Очевидно, было бы хорошо, если бы люди обновили свое программное обеспечение, но это довольно нереально ожидать от них. – HockeyJ

ответ

1

Я протестировал ваш пример кода и даже создал файл HTML с указанным выше содержимым и протестировал его снова в Safari 9.1.1 - все работает абсолютно нормально.

Возможно, проблема заключается в том, что Safari кэширует ваш контент с Azure, вы можете очистить кеш веб-браузера и повторить проблему?

Возможно, есть кеш на Azure, который также нуждается в очистке?

+0

спасибо за то, что заглянули в него. Оказалось, что мне нужно обновить OS X (подробности см. В комментарии выше). К сожалению, не предусмотрено исправление для всех пользователей. Кажется, это была ошибка в OSX/Safari. У вас есть преимущество в ваших усилиях по изучению этого. – HockeyJ

+0

Благодарим за обновление @HockeyJ – mattpark22

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