英文:
:hover is not working on <a> element. and its inside <li> element
问题
在<a>元素上添加悬停效果不起作用，可能是因为其父元素<li>。我不知道。
我尝试在<a>元素内部的<li>元素上应用悬停效果（translateY），但不起作用。但如果我在<li>上应用悬停（translateY），它就起作用。有人可以告诉我问题在哪里吗？
a {
cursor: pointer;
text-decoration: none;
font-family: 'Ubuntu', sans-serif;
font-size: 1.2rem;
font-weight: bold;
color: white;
transition: all 0.3s ease-in;
}
a:hover {
color: aquamarine;
transform: translateY(-10px);
}
<nav id="navbar">
<a id="nav-brand" href="">MrinB</a>
<div id="div-items">
<ul id="ul-items">
<li class="li-items"><a id="a" href="">Home</a></li>
<li class="li-items"><a id="a" href="">Contact</a></li>
<li class="li-items"><a id="a" href="">About Me</a></li>
</ul>
</div>
</nav>
英文:
adding hover effect on <a> element is not working. maybe because of its parent element <li>. i dont know
i was trying to apply hover effect(translateY) on <a> element which is inside a <li> element.but is not working but if i apply hover(trasnlateY) on <li>. its works. can someone tell me whats the problem.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
a {
cursor: pointer;
text-decoration: none;
font-family: 'Ubuntu', sans-serif;
font-size: 1.2rem;
font-weight: bold;
color: white;
transition: all 0.3s ease-in;
}
a:hover {
color: aquamarine;
transform: translateY(-10px)
}
<!-- language: lang-html -->
<nav id="navbar">
<a id="nav-brand" href="">MrinB</a>
<div id="div-items">
<ul id="ul-items">
<li class="li-items"><a id="a" href=""> Home</a></li>
<li class="li-items"><a id="a" href="">Contact</a></li>
<li class="li-items"><a id="a" href="">About Me</a></li>
</ul>
</div>
</nav>
<!-- end snippet -->
答案1
得分: 1
在 a 标签上添加 display: inline-block：
a {
cursor: pointer;
text-decoration: none;
font-family: 'Ubuntu', sans-serif;
font-size: 1.2rem;
font-weight: bold;
color: black;
display: inline-block;
transition: all 0.3s ease-in;
}
这将在 a 标签上设置 display 属性为 inline-block。
英文:
Add display-inline:block on a tag
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
a{
cursor: pointer;
text-decoration: none;
font-family: 'Ubuntu', sans-serif;
font-size: 1.2rem;
font-weight: bold;
color: black;
display:inline-block;
transition: all 0.3s ease-in;}
a:hover{
color: aquamarine;
transform: translateY(-10px)}
<!-- language: lang-html -->
<nav id="navbar">
<a id="nav-brand" href="">MrinB</a>
<div id="div-items">
<ul id="ul-items">
<li class="li-items"><a id="a" href=""> Home</a></li>
<li class="li-items"><a id="a" href="">Contact</a></li>
<li class="li-items"><a id="a" href="">About Me</a></li>
</ul>
</div>
</nav>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论