Question

我有一个网站，上面有一些图像，当它们悬停在上面时会显示文字，并在图像上以纯色背景链接。虽然这种效果在Safari中不起作用，但我无法弄清楚哪个可能导致问题。

HTML

<div class="link-wrapper">
  <div class="textwidget">
    <section class="fg-grid-view clearfix">
      <div class="fb-gallery">
        <div class="fg-grid-img">
          <a href="http://www.website.com" target="_blank" rel="noopener">
            <img src="http://valokuvakeskusnykyaika.fi/wp-content/uploads/2013/05/28.12.2011_S.K.-290x290.jpg" title="Image">
          </a>
        </div>
        <div class="fg-grid-hover">
          <h6>
            <a href="http://www.website.com" target="_blank" rel="noopener">Website</a>
          </h6>
          <p>Some text here to describe the link</p>
        </div>
      </div>
    </section>
  </div>
</div>

CSS

.wrapper { width: 25%; padding: 5px; }
section { display: block; }
section.fg-grid-view { text-align: center; }
.clearfix:before { content: ""; display: table; }
.textwidget > .fg-grid-view > .fb-gallery { width: 100%; }
.fg-grid-view .fb-gallery { box-sizing: content-box; padding: 0 0 1.5em 0; float: left; position: relative; }
.fg-grid-view .fb-gallery:hover:before { transition: opacity 0.3s linear; opacity: 1; }
.textwidget > .fg-grid-view .fb-gallery:before { background: rgba(100, 100, 100, 1); }
.fg-grid-view .fb-gallery:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 99;
  opacity: 0;
  transition: opacity 0.3s linear;
}
.fg-grid-hover {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 99;
  text-align: center;
  padding: 20px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  top: 50%;
  opacity: 0;
  visibility: hidden;
  margin-top: 40px;
  transition: all 0.5s ease-in-out;
}
.textwidget > .fg-grid-view .fb-gallery .fg-grid-hover p { color: #ffffff; }
.fb-gallery:hover .fg-grid-hover { opacity: 1; visibility: visible; margin-top: 0; }
.fg-grid-hover h6 a { font-size: 2.5em; color: #ffffff; text-decoration: none; }

这是一个JSfiddle：https://jsfiddle.net/45zt2n91/1/

Answer 1

对于iOS Mobile Safari，解决方法是添加：

<body ontouchstart>

Answer 2

试试这个，

https://jsfiddle.net/45zt2n91/3/

用户浏览器前缀-webkit-transition: all 0.5s ease-in-out;

悬停：不在Safari中工作之前

2 个答案: