html - 光标不会更改为 Safari 中链接悬停时的指针

Question

我在一个页面上有几个链接。在除 Safari 之外的所有浏览器中，当鼠标悬停在链接上时，光标会变为指针。我不确定 Safari 发生了什么。所有链接都可用，所有其他 CSS 和 HTML 加载，只有光标不工作。

CSS

.social-icons
  {
    display: inline-block;
    margin: auto;
    text-align: center;
    width: 100%;
    z-index:10;
  }
  .social-icons .svg
  {
        color: #6a567f;
    line-height: 24px;
    letter-spacing: 1px;
    font-size: 12px;
    width: 40px;
    height: 40px;
    margin: 20px 14px;
  }

 .splash .social-icons .svg:hover .st0
  {
      fill:#ffffff;
      cursor:pointer;
  } 

HTML

<div class="social-icons"><a class="fbn" href="http://www.facebook.com"><img class="svg" src="fb.svg"/></a><a href="http://twitter.com"><img class="svg" src="twitter.svg"/></a><a href="http://www.tumblr.com"><img class="svg" src="tumblr.svg"/></a><a href="http://instagram.com"><img class="svg" src="ig.svg"/></a></div>     

注意:.st0 是每个 svg 路径的类。

Answer 1

• 您可以从选择器中删除 st0:

像这样:

.social-icons .svg:hover {
    fill: #ffffff;
    cursor: pointer;
}

• 或者，如果您需要添加/使用 st0 类，请将其添加到 img html 元素和 css 选择器:

HTML:

<img class="svg st0" src="ig.svg" />

CSS:

.social-icons .svg:hover.st0 {
    fill: #ffffff;
    cursor: pointer;
}

第一个选项的片段:

.social-icons {
  display: inline-block;
  margin: auto;
  text-align: center;
  width: 100%;
  z-index: 10;
}

.social-icons .svg {
  color: #6a567f;
  line-height: 24px;
  letter-spacing: 1px;
  font-size: 12px;
  width: 40px;
  height: 40px;
  margin: 20px 14px;
}

.social-icons .svg:hover {
  fill: #ffffff;
  cursor: pointer;
}

<div class="social-icons">
  <a class="fbn" href="http://www.facebook.com"><img class="svg" src="fb.svg" /></a>
  <a href="http://twitter.com"><img class="svg" src="twitter.svg" /></a>
  <a href="http://www.tumblr.com"><img class="svg" src="tumblr.svg" /></a>
  <a href="http://instagram.com"><img class="svg" src="ig.svg" /></a>
</div>