所以我想做的是:
- 当你将鼠标悬停在
li
上时,a
也会变得透明(因此它也会受到影响) - 当您点击
li
时,它会转到另一个页面(基本上,它正在做a
应该做的事情)。 - 当您将鼠标悬停在
li
上时,会出现背景图片,替换a
中的文本。
这是我在 html 中的内容:
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;
}
<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>
最佳答案
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;
}
<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>
jsFiddle
关于html - 悬停元素时添加背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38386055/