Question

所以我想做的是以下内容：

当您将鼠标悬停在li上时，a也会变得透明（因此它也会受到影响）
当您点击li时，它会转到另一个页面（基本上，它正在执行a应该执行的操作。）
当您将鼠标悬停在li上时，会显示背景图片，替换a内的文字。

这就是我在html中所拥有的：

＆＃13;

nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: space-between;
}
nav ul li:hover {
  background-color: #FFB53A;
}
nav ul li a {
  text-decoration: none;
  color: black;
  font-family: Gotham book;
}
nav ul li {
  padding-top: 15px;
  padding-bottom: 15px;
  text-align: center;
  width: 20%;
  border-right: 1px solid #b3b3b3;
}
nav {
  background-color: #ccc;
  width: 100%;
}
nav ul .lupa {
  background-image: url("http://i.imgur.com/kXm05cw.png");
  background-repeat: no-repeat;
  background-position: center;
}

＆＃13;

<nav>
  <ul>
    <li class="opcion-1"><a title="Opcion 1" href="#">Quiénes somos</a></li>
    <li class="opcion-2"><a title="Opcion 2" href="#">Nuestro trabajo</a></li>
    <li class="opcion-3"><a title="Opcion 3" href="#">UNAC news</a></li>
    <li class="opcion-4"><a title="Opcion 4" href="#">Cómo donar</a></li>
    <li class="lupa"><a title="Opcion 5" href="#"></a></li>
  </ul>
</nav>

＆＃13;

Answer 1

＆＃13;

nav {
  display: flex;
  justify-content: space-between;
  background-color: #ccc;
}

nav > a {
  text-decoration: none;
  color: black;
  font-family: Gotham book;
  text-align: center;
  width: 20%;
  border-right: 1px solid #b3b3b3;
  padding-top: 15px;
  padding-bottom: 15px;
}

nav > .lupa {
  background-image: url("http://i.imgur.com/kXm05cw.png");
  background-repeat: no-repeat;
  background-position: center;
}

nav > a:hover {
  background-color: #FFB53A;
  color: transparent;
  background-image: url(http://i.imgur.com/60PVLis.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

＆＃13;

<nav>
  <a class="opcion-1" title="Opcion 1" href="#">Quiénes somos</a>
  <a class="opcion-2" title="Opcion 2" href="#">Nuestro trabajo</a>
  <a class="opcion-3" title="Opcion 3" href="#">UNAC news</a>
  <a class="opcion-4" title="Opcion 4" href="#">Cómo donar</a>
  <a class="lupa" title="Opcion 5" href="#"></a>
</nav>

＆＃13;

元素悬停时添加背景图像

1 个答案:

jsFiddle