当前位置: 首页 > 面试题库 >

结合:after和:hover

皇甫建木
2023-03-14
问题内容

我想在CSS(或任何其他伪选择器)中结合:after使用:hover。我基本上有一个列表,并且selected该类的项目具有使用施加的箭头形状:after。我希望对悬停的对象也是如此,但不能完全使其正常工作。继承人代码

#alertlist
{
    list-style:none;
    width: 250px;
}
#alertlist li
{
    padding: 5px 10px;
    border-bottom: 1px solid #e9e9e9;
    position:relative;
}
#alertlist li.selected, #alertlist li:hover
{
    color: #f0f0f0;
    background-color: #303030;
}

#alertlist li.selected:after
{
    position:absolute;
    top: 0;
    right:-10px;
    bottom:0;

    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #303030;
    content: "";
}

<ul id="alertlist">
    <li>Alert 123</li>
    <li class="selected">Alert 123</li>
    <li>Alert 123</li>
</ul>

问题答案:

只需:after以与#alertlist li:hover选择器相同的方式将其追加到选择#alertlist li.selected器即可:

#alertlist li.selected:after, #alertlist li:hover:after
{
    position:absolute;
    top: 0;
    right:-10px;
    bottom:0;

    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #303030;
    content: "";
}


 类似资料:
  • 注:要详细了解在 Premiere Pro 和 After Effects 的各种版本之间使用 Dynamic Link 时的兼容性,请参阅知识库文章在 Premiere Pro 和 After Effects 的各种版本之间使用 Dynamic Link。 专家言论:与 Premiere Pro 和 After Effects 链接的 Creative Dynamic Link 工作流专家言论:

  • 关于预合成和嵌套 如果要对合成中已存在的某些图层进行分组,可以预合成 这些图层。预合成图层会将这些图层放置在新合成中,这将替换原始合成中的图层。新的嵌套合成将成为原始合成中单个图层的源。新合成将显示在“项目”面板中并且可用于渲染或者在其他任何合成中使用。您可以通过将现有合成添加到其他合成中来嵌套合成,正如您将其他任何素材项目添加到合成中一样。预合成单个图层可用于向图层添加变换属性以及影响渲染合成元

  • 问题内容: 我目前的构建数量至少为10,因此我必须使用该库来实现。我已经设置了,但是我现在要添加一个,但是这需要扩展我的类,Java没有多个。我该怎么办? 问题答案: ListActivity尚未移植到AppCompat。可能是因为您应该认为它“已弃用”,而改用ListFragment。 片段将与ActionBarActivity一起使用,只需确保它们是支持库中的片段即可。 要通过读这大约片段的链

  • 问题内容: 我正在使用CodeIgniter编写的现有站点上工作,我们正在考虑将AngularJS用于需要大量前端功能的某些页面,但我们不想替换所有CodeIgniter视图(一次(尚未))。 因此,我单击了由angular的路由器控制的链接,该链接由javascript处理,但下一个链接可能是应由CodeIgniter框架处理的“正常”请求。 有两种结合这两种方法的优雅方法吗?我真的不介意一些额

  • 你知道是否可以用PDFBox填写PDF格式的表格吗?如果是的话,是否有代码示例或教程来实现这一点?若否,有何最佳选择可达致这个目标?

  • 主要内容:示例YAML包括使用缩进范围的块集合。 在这里,每个条目都以一个新行开头。 集合中的块序列表示每个条目带有破折号和空格( )。 在YAML中,块集合样式不由任何特定指示符表示。 YAML中的块集合可以与其他标量数量区分开来,并且包含其中包含的键值对的标识。 映射是JSON结构中包含的键值的表示。 它经常用于多语言支持系统以及在移动应用程序中创建API。 映射使用键值对表示以及冒号和空格()的使用。 示