Я пытаюсь сделать очень простой 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.
Что мне нужно сделать, чтобы заставить его работать на стандартной странице, пожалуйста?
Работает над Safari 9..1.1 (OS X 10.11.5). Я протестировал CodePen, ссылку Plnkr и примерный код, который вы вставили. –
Просто хочу обновить os/browser сейчас .... – HockeyJ
Спасибо @RobertC. Ответ состоял в том, чтобы обновить Mac OS X до 10.11.5. Я все еще не уверен, что делать, чтобы люди не столкнулись с проблемой в первую очередь. Очевидно, было бы хорошо, если бы люди обновили свое программное обеспечение, но это довольно нереально ожидать от них. – HockeyJ