程序员经验分享-hwhale

选择悬停项目之前的所有项目

2023-11-28

我有一个带有 5 个内联星的容器。

我需要的是当你将鼠标悬停在一颗星星上时，该星星和它之前的所有星星都会获得不同的背景。 （我使用的是精灵，所以我改变了背景位置）

Markup:

<div class="wpr"> 
    <span class="star"></span>
    <span class="star"></span>
    <span class="star"></span>
    <span class="star"></span>
    <span class="star"></span>
</div>

如果我使用同级组合器 (~)，我会得到相反的效果。

.star:hover, .star:hover ~ .star
{
    background-position: 0 -18px;
}

FIDDLE

我怎样才能对悬停之前的所有星星实现这一点？


哈哈，刚刚想通了，

我只需要添加direction: rtl;在包装纸上。

FIDDLE

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

cssselectors

选择悬停项目之前的所有项目 的相关文章

随机推荐

  • 比较 XML 忽略元素顺序

    使用 XMLUnit 2 如何在不考虑元素顺序的情况下比较两个文档 I got XMLUnit 1 的这个问题 但显然 v2 中的新 API 不再有提到的方法了 这是我当前的代码 Diff diff DiffBuilder compare

  • aks 报告“pod 不足”

    我已经完成了 Azure Cats Dogs 教程中描述的内容here我在 AKS 中启动应用程序的最后一步中遇到错误 Kubernetes 报告我的 Pod 不足 但我不确定为什么会出现这种情况 几周前我已经完成了相同的教程 没有出现任何

  • Firefox、IE9+ 在 td 内出现 div 高度 100% 的问题（Chrome 上的工作示例）

    拿着它 http jsfiddle net zVscL 4 edit me height 100 does not behave the same as Chrome width 10px border 1px solid blue bac

  • 如何使用 git 正确处理 GreaseMonkey 用户脚本？

    我正在为 Firefox 编写用户脚本 所以我使用油猴 另外 为了方便开发 我使用git更新我的代码的不同版本 现在 让我尝试解释一下这个问题 当我将本地 git 目录中的用户脚本添加到 GreaseMonkey 时 就会在 Firefox

  • Rails .where 与 .find

    我注意到Model where即使只有一个结果 方法也始终返回一个数组Model find方法没有 这有什么原因吗 我想Model where是自 Rails 3 X 以来的首选函数 我应该使用Model find当我期望一个结果并且Mod

  • 为什么 JavaScript 中的 new Number(2) != new String("2")

    以下评价为true new Number 2 2 new String 2 2 显然 但请执行以下操作 2 2 new Number 2 2 new String 2 2 那么有人可以清楚地解释为什么他下面的评价false new Numb

  • 我可以将层归一化与 CNN 结合使用吗？

    我发现层归一化是比批量归一化更现代的归一化方法 并且在 Tensorflow 中编码非常简单 但我认为层归一化是为 RNN 设计的 批量归一化是为 CNN 设计的 我可以使用 CNN 的层归一化来处理图像分类任务吗 选择批量归一化或层的标准

  • 从列表中删除项目[重复]

    这个问题在这里已经有答案了 在循环列表时 我想根据条件删除列表中的项目 请参阅下面的代码 这给了我一个ConcurrentModification例外 for Object a list if a getXXX equalsIgnoreCa

  • 将 IConfigurationRoot 部分的更改保存到 .net Core 2.2 中的 *.json 文件

    我正在挖掘寻找解决方案 但没有找到它 我敢打赌有人遇到过这个问题 那么问题是什么 为了测试 我创建了简单的控制台应用程序 解决方案将在 asp net core web api 中使用 我有 TestSetting json 配置文件 设置

  • 为什么模板参数不推导只作为返回类型？

    如果我不在函数参数列表中使用模板参数 类型 gt 仅作为返回类型 则不会有任何推论 template

  • 多地图空间问题：Guava

    在我的 Java 代码中 我使用 Guava 的 Multimap com google common collect Multimap 通过使用这个 Multimap

  • 散列密码的最佳方法是什么？在 PHP 7 中，password_hash 是否足够安全或者是否有更安全的方法？

    散列密码的最佳方法是什么 我知道一种方法可以很好地完成工作 但我想知道是否有更好的方法在 PHP 7 中对密码进行哈希处理password hash password hash 足够好吗 我想知道在 PHP 7 中是否有比 password

  • SpringTemplate 没有找到适合响应类型的 HttpMessageConverter

    我在使用 Spring Rest 模板时收到以下错误 但我已经为 json 响应定义了 jackson 当我使用其余客户端查询 url 时 我得到了很好的响应 org springframework web client RestClien

  • Python Tornado渲染静态目录

    我正在尝试使用 Python 中的 Tornado API 从静态目录提供页面 这个答案与我想做的类似 但我似乎无法让它发挥作用 我的目录结构如下所示 所有静态文件都位于名为的文件夹内web 我有一个像这样的网络服务器设置 class Ap

  • 录制音频并以 Wav 或 MP3 形式上传到服务器

    我不确定我问的地方是否正确 但基本上我正在寻找有关最佳方法的建议 通过网站上的麦克风录制音频并将音频以 Wav 或 MP3 文件上传到服务器 有没有人对闪光灯有丰富的经验 这会很难做到吗 目前市场上有什么可以做到这一点吗 我正在考虑将其实现

  • 如何为“日期”创建索引？

    如何为 日期 创建索引 CentOS7 MongoDB服务器版本 3 4 2 db animals createIndex date ok 0 errmsg The field key must be an object but got s

  • web组件shadow dom中的rem

    我们知道我们可以设置font size on html as the rem基于普通 DOM 节点 我使用这个技巧使我的应用程序的字体更加灵活 可以通过 js 动态更改 然而 当我创建一个Web组件时 我发现rem即使我尝试添加样式 影子

  • GWT-RPC 与 HTTP 调用 - 哪个更好？

    我正在评估使用 GWT RPC 进行的调用和HTTP调用 我的 appln 服务作为 Java servlet 托管 我当前使用 HTTPProxy 连接从它们获取数据 我希望将它们转换为 GWT RPC 调用 如果这能带来性能改进 我想知

  • 云端点收集参数

    我正在使用 Google App Engine Cloud Endpoints 并且正在尝试接收集合参数 不确定我是否能做到这一点 我知道我可以返回列表或任何集合 This public List

  • 选择悬停项目之前的所有项目

    我有一个带有 5 个内联星的容器 我需要的是当你将鼠标悬停在一颗星星上时 该星星和它之前的所有星星都会获得不同的背景 我使用的是精灵 所以我改变了背景位置 Markup div class wpr span class star span

热门标签