javascript - 如何保持这个箭头不断旋转

Question

所以我决定建立一个导航栏，但里面有一个下拉菜单，所以我这样做了，我不知道如何保持箭头不断旋转，直到下拉菜单消失。请帮忙。

我尝试过 javascript 和其他 CSS 技巧，但没有想到任何东西。如果我最终需要为此使用javascript，那很好，我只想让它工作:)

我希望箭头不断旋转，直到下拉内容消失。

* {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  outline: 0;
}


/* ===== HEADER ===== */

header {
  padding: 20px 30px 40px 0;
  box-shadow: 0 1px 10px rgba(0, 0, 0, .11);
}

header nav {
  float: right;
}

header li {
  margin: 0 .5em;
  display: inline-block;
}

header a {
  font-size: 20px;
  text-transform: capitalize;
  text-decoration: none;
  color: #666666;
  transition: .2s;
}

header a:hover {
  color: black;
}

header .dropdown-link {
  padding-right: 5px;
}

header i {
  cursor: pointer;
  transition: .35s;
}

header .dropdown-link:hover+i,
header i:hover {
  transform: rotate(180deg);
}

header i:hover+.dropdown-content {
  display: grid;
}

.dropdown-link {
  padding: 20px 0;
}


/* ===== DROPDOWN-CONTENT ===== */

.dropdown-content {
  display: none;
  position: absolute;
  margin: 10px 0 0 0;
  padding: 10px 20px;
  background-color: white;
  /* 0 x and y offset, 10px blur and 5px size */
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, .11);
  border-radius: 10px;
}

.dropdown-content:hover {
  display: grid;
}

.dropdown-link:hover~.dropdown-content {
  display: grid;
}

.dropdown-content a {
  padding: 5px 0;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />


<header>
  <nav>
    <ul>
      <li><a href="#">home</a></li>
      <li><a href="#">features</a></li>
      <li class="dropdown-item">
        <a class="dropdown-link" href="#">dropdown</a>
        <i class="fa fa-chevron-down"></i>
        <div class="dropdown-content">
          <a href="#">link 1</a>
          <a href="#">link 2</a>
          <a href="#">link 3</a>
          <a href="#">link 4</a>
          <a href="#">link 5</a>
        </div>
      </li>
      <li><a href="#">contact</a></li>
      <li><a href="#">about</a></li>
    </ul>
  </nav>
</header>

标签： javascripthtmlcss

Answer 1

问题是当您将鼠标悬停在<a>标签 ( dropdown-link) 上时，您的图标会发生变化。您需要在li( dropdown-item) 元素上设置悬停，因此当显示 UL 时，从技术上讲，您仍然悬停在li.

这是重要的代码（也是唯一更新的东西）：

header .dropdown-item:hover > i,
header i:hover {
  transform: rotate(180deg);
}

* {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  outline: 0;
}


/* ===== HEADER ===== */

header {
  padding: 20px 30px 40px 0;
  box-shadow: 0 1px 10px rgba(0, 0, 0, .11);
}

header nav {
  float: right;
}

header li {
  margin: 0 .5em;
  display: inline-block;
}

header a {
  font-size: 20px;
  text-transform: capitalize;
  text-decoration: none;
  color: #666666;
  transition: .2s;
}

header a:hover {
  color: black;
}

header .dropdown-link {
  padding-right: 5px;
}

header i {
  cursor: pointer;
  transition: .35s;
}

header .dropdown-item:hover>i,
header i:hover {
  transform: rotate(180deg);
}

header i:hover+.dropdown-content {
  display: grid;
}

.dropdown-link {
  padding: 20px 0;
}


/* ===== DROPDOWN-CONTENT ===== */

.dropdown-content {
  display: none;
  position: absolute;
  margin: 10px 0 0 0;
  padding: 10px 20px;
  background-color: white;
  /* 0 x and y offset, 10px blur and 5px size */
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, .11);
  border-radius: 10px;
}

.dropdown-content:hover {
  display: grid;
}

.dropdown-link:hover~.dropdown-content {
  display: grid;
}

.dropdown-content a {
  padding: 5px 0;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />


<header>
  <nav>
    <ul>
      <li><a href="#">home</a></li>
      <li><a href="#">features</a></li>
      <li class="dropdown-item">
        <a class="dropdown-link" href="#">dropdown</a>
        <i class="fa fa-chevron-down"></i>
        <div class="dropdown-content">
          <a href="#">link 1</a>
          <a href="#">link 2</a>
          <a href="#">link 3</a>
          <a href="#">link 4</a>
          <a href="#">link 5</a>
        </div>
      </li>
      <li><a href="#">contact</a></li>
      <li><a href="#">about</a></li>
    </ul>
  </nav>
</header>