Question

我正试图在悬停时放宽三角形，例如使不透明度变浅，并在4秒钟之后使其变为opacity = 1。这可能吗？如果是这样的话？

nav a:hover:after {
    content: "";
    display: block;
    border: 8px solid #405580;
    border-bottom-color: #fff;
    position: absolute;
    left:33%;
    margin-top: 23px;

}

我附上了我的代码笔。请告知：https://codepen.io/anon/pen/awOZZz

Answer 1

您可以添加此代码，由@Santi编写。

nav a::after {
  content: "";
  display: block;
  opacity: 0;
  transition: opacity 4s;
}

＆＃13;

* {
  margin: 0;
  border: 0;
  padding: 0;
}
body {
  background: #f0f0f0;
  font: 14px/20px Arial, San-Serif;
  color: #555 margin: 0;
}
a {
  color: #FFF;
  text-decoration: none;
  font-weight: bold;
  position: relative;
}
a:hover {
  color: #FFF;
  text-decoration: underline;
}
header {
  background: #405580;
  width: 100%;
  height: 86px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  opacity: 0.90;
}
nav {
  float: right;
  padding: 35px 20px 0 0;
}
nav ul li {
  display: inline-block;
  float: left;
  padding: 10px;
}
nav a::after {
  content: "";
  display: block;
  opacity: 0;
  transition: opacity 4s;
}
nav a:hover::after {
  content: "";
  display: block;
  border: 8px solid #405580;
  border-bottom-color: #fff;
  position: absolute;
  left: 33%;
  margin-top: 23px;
  opacity: 1;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Adatia.co.uk</title>
  <meta content="width=divice-width, initial-scale=1.0" name="viewport">
  <link href="NewFile.css" rel="stylesheet">
</head>
<body>
  <header>
    <nav>
      <a href="#" id="menu-icon"></a>
      <ul>
        <li>
          <a class="current" href="#">Home</a>
        </li>
        <li>
          <a href="#">Page1</a>
        </li>
        <li>
          <a href="#">Page2</a>
        </li>
        <li>
          <a href="#">Page3</a>
        </li>
        <li>
          <a href="#">Page4</a>
        </li>
        <li>
          <a href="#">Page5</a>
        </li>
      </ul>
    </nav>
  </header>
</body>
</html>

＆＃13;

CSS On Hover Ease / fade triangle in

1 个答案: