代码之家 › 专栏 › 技术社区 › Keith

悬停效果,改变除选定的悬停外的所有相同类型

css

Keith · 技术社区 · 5 年前

我试图做一个悬停效果,改变其他的“a”标签与悬停的“a”标签。到目前为止,我只能做选定的悬停。

ul li{
  list-style: none;
}
ul li a {
   color: black;
}
ul li a:hover{
   color: green;
   background: orange;
}
ul li a:hover:not(a:hover){
   color: red;
   background: black;
 }

  <ul>
   <li>
     <a>test</a>
   </li>
   <li>
     <a>test</a>
   </li>
   <li>
     <a>test</a>
   </li>
  </ul>

在essense中,我希望所选的悬停颜色为绿色和背景橙色,然后其他“a”标记的颜色为红色和背景黑色;

1 回复 | 直到 5 年前

ray 5 年前

你能给我们设定一个悬停规则吗 ul 将所有项目更改为黑色和红色,然后在特定悬停项目上覆盖它的级别?

ul li{
  list-style: none;
}

ul:hover li a {
   color: red;
   background: black;
}

ul li a {
   color: black;
}

ul li a:hover{
   color: green;
   background: orange;
}

<ul>
   <li>
     <a>test</a>
   </li>
   <li>
     <a>test</a>
   </li>
   <li>
     <a>test</a>
   </li>
  </ul>

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

Mass · 如何在Tailwind CSS v4中创建配置

1 年前

magenta placenta · 将css变量合并为一个变量

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前