0

我正在制作我的投资组合网页，并制作了一个圆形的小型“联系我”部门。我使用了一些 css，所以现在当我将鼠标悬停在与我联系的圆形 div 上时，我会以一种很酷的过渡方式在它周围出现 6 或 7 个图标，我的linkedin、gmail、instagram 的图标......等等等等。我目前面临的问题，我已经从stackoverflow的建议中尝试了很多东西，我看到这种情况正在发生，我看到我的图标和所有内容都以我想要的方式通过Mozilla FireFox上的css显示，但是当我打开Chrome 上的网页，当我将鼠标指针悬停在联系我的 div 上时，我的鼠标指针会显示所有指向图标的链接，即我仍然可以在 div 周围的空白区域中按下它，它会将我带到我的社交媒体链接，但是图标的视觉表示并不意味着我可以' 看不到 Chrome 上加载的任何图标，我看到 Mozilla 甚至 Microsoft Edge 上的所有图标都相同。谷歌浏览器是否存在关于此问题的问题，因为某些原因图标没有加载到谷歌浏览器上？我在这里分享我一半的 html 和 css 代码。

这是我拥有一切的主要 div：

<div class="navbar-contact">
  Contact me
  <ul class="menu">
    <li>
      <a
        href="https://www.facebook.com/sanskar.kc.73/"
        target="_blank"
        class="icon-facebook"
      >
        <i class="fab fa-facebook-f"> </i>
      </a>
    </li>
    <li>
      <a
        href="https://twitter.com/Sanskar65167812"
        target="_blank"
        class="icon-twitter"
      >
        <i class="fab fa-twitter"> </i>
      </a>
    </li>
    <li>
      <a
        href="https://www.linkedin.com/in/sanskar49/"
        target="_blank"
        class="icon-linkedin"
      >
        <i class="fab fa-linkedin-in"> </i>
      </a>
    </li>
    <li>
      <a
        href="https://mail.google.com/mail/u/0/#inbox"
        target="_blank"
        class="icon-envelope"
      >
        <i class="fa fa-envelope"> </i>
      </a>
    </li>
    <li>
      <a
        href="https://www.instagram.com/sanskar49/?hl=en"
        target="_blank"
        class="icon-instagram"
      >
        <i class="fab fa-instagram"> </i>
      </a>
    </li>
    <li>
      <a
        href="https://secure.skype.com/portal/profile"
        target="_blank"
        class="icon-skype"
      >
        <i class="fab fa-skype"> </i>
      </a>
    </li>
    <li>
      <a
        href="https://www.pinterest.com/sanskarbc/_saved/"
        target="_blank"
        class="icon-pinterest"
      >
        <i class="fab fa-pinterest"> </i>
      </a>
    </li>
    <li>
      <a
        href="https://github.com/Sanskar49"
        target="_blank"
        class="icon-github"
      >
        <i class="fab fa-github"> </i>
      </a>
    </li>

    <li>
      <a
        href="https://mail.google.com/mail/u/0/#inbox"
        target="_blank"
        class="icon-google_plus"
      >
        <i class="fab fa-google-plus-g"> </i>
      </a>
    </li>
  </ul>
</div>

还有我用过的css。

    .navbar-contact {
  font-family: cursive;
  width: 150px;
  height: 150px;
  line-height: 150px;
  border-radius: 50%;
  background: black;
  margin: 95px auto;
  position: relative;
  cursor: pointer;
  text-align: center;
  font-size: 1.3em;
  font-weight: 400;
  color: white;
  transition: 0.24s 0.2s;
}
.navbar-contact .menu {
  list-style: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: -75px;
  left: -75px;
  border: 150px solid transparent;
  cursor: default;
  border-radius: 50%;
  transform: scale(0);
  transition: transform 1.4s 0.07s;
  z-index: -1;
}

.navbar-contact:hover .menu {
  transition: transform 0.4s 0.08s, z-index 0s 0.5s;
  transform: scale(1);
  z-index: 1;
}

.navbar-contact .menu li {
  position: absolute;
  top: -100px;
  left: -100px;
  transform-origin: 100px 100px;
  transition: all 0.5s 0.1s;
}

.navbar-contact:hover .menu li {
  transition: all 0.7s;
}
.navbar-contact .menu li a {
  padding: 10%;
  width: 45px;
  height: 45px;
  line-height: 45px;
  border-radius: 50%;
  background: white;
  position: absolute;
  font-size: 130%;
  color: #f273b1;
  transition: 0.7s;
}
.navbar-contact:hover .menu li:nth-child(1) {
  transition-delay: 0.02s;
  transform: rotate(85deg);
}
.navbar-contact:hover .menu li:nth-child(1) a {
  transition-delay: 0.04s;
  transform: rotate(635deg);
}
.navbar-contact:hover .menu li:nth-child(2) {
  transition-delay: 0.04s;
  transform: rotate(125deg);
}
.navbar-contact:hover .menu li:nth-child(2) a {
  transition-delay: 0.08s;
  transform: rotate(595deg);
}
.navbar-contact:hover .menu li:nth-child(3) {
  transition-delay: 0.06s;
  transform: rotate(165deg);
}
.navbar-contact:hover .menu li:nth-child(3) a {
  transition-delay: 0.12s;
  transform: rotate(555deg);
}
.navbar-contact:hover .menu li:nth-child(4) {
  transition-delay: 0.08s;
  transform: rotate(205deg);
}
.navbar-contact:hover .menu li:nth-child(4) a {
  transition-delay: 0.16s;
  transform: rotate(515deg);
}
.navbar-contact:hover .menu li:nth-child(5) {
  transition-delay: 0.01s;
  transform: rotate(245deg);
}
.navbar-contact:hover .menu li:nth-child(5) a {
  transition-delay: 0.2s;
  transform: rotate(475deg);
}
.navbar-contact:hover .menu li:nth-child(6) {
  transition-delay: 0.12s;
  transform: rotate(285deg);
}
.navbar-contact:hover .menu li:nth-child(6) a {
  transition-delay: 0.24s;
  transform: rotate(435deg);
}
.navbar-contact:hover .menu li:nth-child(7) {
  transition-delay: 0.14s;
  transform: rotate(325deg);
}
.navbar-contact:hover .menu li:nth-child(7) a {
  transition-delay: 0.28s;
  transform: rotate(395deg);
}
.navbar-contact:hover .menu li:nth-child(8) {
  transition-delay: 0.16s;
  transform: rotate(365deg);
}
.navbar-contact:hover .menu li:nth-child(8) a {
  transition-delay: 0.32s;
  transform: rotate(355deg);
}
.navbar-contact:hover .menu li:nth-child(9) {
  transition-delay: 0.18s;
  transform: rotate(405deg);
}
.navbar-contact:hover .menu li:nth-child(9) a {
  transition-delay: 0.36s;
  transform: rotate(315deg);
}
a,
a:hover {
  text-decoration: none;
}

最后但并非最不重要的，这些是我的进口。

    <!DOCTYPE html>
<html g="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="index.css" />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.0.8/css/all.css"
      integrity="sha384-3AB7yXWz4OeoZcPbieVW64vVXEwADiYyAEhwilzWsLw+9FgqpyjjStpPnpBO8o8S"
      crossorigin="anonymous"
    />

    <title>Portfolio</title>
  </head>

我想尽快托管这个投资组合，但我坚持最后一件事情，它已经在一个浏览器上工作，但在另一个浏览器上却不行。有人可以帮忙吗？

4

1 回答 1

0

我不是专家，但可能会再次在 Font Awesome 上查找图标并检查它们是否可能更改了类名，如果是，则更新它，CDN 链接也是如此

于 2022-01-08T15:12:18.033 回答