css ：hover对元素无效< a>,及其内部< li>元素[重复]

l7wslrjt 于 2023-02-14 发布在其他

关注(0)|答案(1)|浏览(114)

- 此问题在此处已有答案**：

CSS transform doesn't work on inline elements（2个答案）
3天前关闭。
在元素上添加悬停效果无效.可能是因为它的父元素<li>.我不知道
我试图应用悬停效果（translateY）的元素是在一个元素.但不工作，但如果我应用悬停（transnlateY）.它的作品.有人能告诉我什么问题. element which is inside a element.but is not working but if i apply hover(trasnlateY) on . its works. can someone tell me whats the problem.

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>

css

来源：https://stackoverflow.com/questions/75407922/hover-is-not-working-on-a-element-and-its-inside-li-element

1条答案

按热度按时间

0lvr5msh1#

在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: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>

赞(0）回复(0）举报 2023-02-14

我来回答

css ：hover对元素无效< a>,及其内部< li>元素[重复]

1条答案

相关问题

热门标签

最新问答