Question

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

CSS

fn

HTML

.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;
  }

注意：.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>

在Safari中链接悬停时，光标不会更改为指针

1 个答案: