CSS 在悬停时从不同元素更改元素内容

2024-01-26

是否可以in CSS当鼠标悬停在不同的元素上时更改元素的内容?举例来说,我有这个 div A、B、C、D、E、F。当我将鼠标悬停在 B 中时,我想在 A 中显示一些文本。如果我将鼠标悬停在 C 中,A 中将会出现不同的文本。其余的也一样。当鼠标悬停在 div B 到 F 中时,所有更改都会在 A 中发生。


目前,这仅通过 CSS 是不可能的。您可以调整孩子或即将出生的兄弟姐妹的风格。但是你can't设置前一个兄弟元素或父元素的样式。

所以关于你的情况你可以这样做:

<div class="a"></div>
<div class="b"></div>
<div class="c"></div>

CSS

/* next sibling only */
div.a:hover + div.b { /* styles for b when hovering a */ }

/* general sibling selector */
div.a:hover ~ div.c { /* styles for c when hovering a */ }
div.b:hover ~ div.c { /* styles for c when hovering b */ }

你不能走另一条路,从b to a例如。

Demo

先试后买 http://jsfiddle.net/YsHA4/

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

CSS 在悬停时从不同元素更改元素内容 的相关文章

  • 移动设备中的 CSS 响应式设计不适用于 uc 浏览器和 Opera Mini [关闭]

    Closed 这个问题需要调试细节 help minimal reproducible example 目前不接受答案 UC 和 Opera Min 浏览器上的响应式网站无法正常工作 我们使用媒体查询进行响应式设计 我搜索了一下 发现了一些
  • 单击表格行可显示更多信息

    我正在尝试使用 jQuery 来实现以下目标 当单击一个表格行时 会显示表格行内的 info div 如果单击另一个表格行 则当前显示的任何其他 info 元素将被隐藏 并根据表格行显示新的 info div已被点击 这个问题是 代码无法正
  • 在 R 中修改传单弹出窗口

    我想修改 R 中传单弹出窗口的外观 帮助文件指出 in the popupOptions 函数需要 传递给底层 Javascript 对象构造函数的额外选项 In 这个例子 https rstudio github io leaflet p
  • 将 Bootstrap CSS 中的列表居中[重复]

    这个问题在这里已经有答案了 重复报告后编辑 抱歉 我认为建议的重复项实际上可能是重复项 我先尝试了一下 但它对我不起作用 因此出现了一个新问题 再次查看新的建议答案后 我意识到我的问题可能与我正在使用的工具 codepen io 的开箱即用
  • 重新加载页面时删除哈希值?

    我使用哈希来切换我的图像滑块 当我重新加载页面并且哈希值设置为 e h 3 没有图片 当图库在几秒钟后自动滑动时 它显示下一个 所以几秒钟内什么也没有 有没有办法在加载页面时检查哈希并将其删除 我只想关心那些用散列为页面添加书签的人 问候
  • 多行有多个提交按钮,我应该为每个按钮制作一个表单吗?

    我列出了大约 20 行 每行代表一个订单 每行需要有 3 个按钮 每个按钮单击将执行不同的操作 我有 3 个操作来处 理每个按钮发布请求 我只是不确定如何为每个按钮设置 Html 表单 tr td td tr
  • BeautifulSoup4:选择属性不等于x的元素

    我想做这样的事情 soup find all td attrs class foo 我想找到所有不具有 foo 类的 td 显然上面的方法不起作用 那怎么办呢 BeautifulSoup确实使 汤 变得美丽且易于使用 You 可以传递一个函
  • 在 Dartlang 中下载大文件

    我需要使用 dartlang 从浏览器下载较大的文件 我一直在使用 data uri 来下载 但已经达到了该方法的大小限制 想知道最好的方法是什么 我研究了使用 HTML5 文件系统 API 但它已被弃用 显然在大多数浏览器中从未真正实现过
  • 有没有一种方法可以在没有输入的情况下发送表单值

    假设我有以下表格
  • 为什么我的 CSS 属性被覆盖/忽略?

    我对 CSS 层次结构 有一些问题 不确定将其称为层次结构是否正确 我正在尝试设置以下 HTML 的样式 section section
  • 如何让 jstree 节点显示长的、可能是多行的内容?

    当使用jsTree插件 http www jstree com 我需要有一个显示其完整内容的节点 目前 每个节点仅显示大约一行文本 如何让 jsTree 中的节点显示节点中的所有文本而不截断节点的内容 下面的 CSS 代码就可以解决这个问题
  • Firefox 忽略 CSS 中的最小高度

    由于某些原因 最小高度在 Firefox 上不起作用 我尝试在 body 上设置 min height 但 Firefox 完全忽略了它 由于我的页面是动态的 我不能只将高度设置为 100 我应该怎么办 body border 1px so
  • Bootstrap 4 Beta 0 网格系统上的 Rowspan

    您好 我正在开发一个使用 Bootstrap 4 Beta 的电子商务模板 我让它在移动设备上工作 但在桌面设备上我不知道如何让购买按钮保持在标题下 在我的方法中 它出现在 图库 部分下 Desired Desktop Desired Mo
  • Twitter Typeahead 上使用 Bootstrap 3 的 CSS 问题

    随着 Bootstrap 3 的发布 Typeahead 已被删除 取而代之的是 https github com twitter typeahead js https github com twitter typeahead js 我已经
  • AngularJS + jQuery 移动

    是否还有其他可能性来设计AngularJS以移动友好的方式应用程序CSS 我正在计划一个移动应用程序 并希望使用 AngularJS 进行逻辑和数据绑定 但我不想自己设计所有内容CSS The AngularJSFAQ说它使用jQuery
  • 如何在html中定义条件换行符?

    我希望这根绳子断在 如果需要的话 没有地方可以写了 7 380 Ft 159 Ft term kd jjal like 7 380 000 Ft 159 125 Ft term kd jjal 如何在html中实现这一点 nbsp 产生 错
  • Svelte 条件元素类报告为语法错误

    我正在做一个if块每if 块的精简指南 https svelte technology guide if blocks 这看起来很简单 但 Svelte 认为这是一个语法错误 svelte plugin ParseError Unexpec
  • 轮播滑动(未滑动)事件上的火灾事件,Bootstrap 3

    Bootstrap 2 似乎可以很好地处理幻灯片事件 请参阅这个问题 https stackoverflow com questions 9651466 how to attach slide slid events to the boot
  • 我自己的而不是从其他网站借用的图像的正确 img src 是什么?

    在我的计算机上 保存 css 和 html 文件的文件夹还包含一些我想要插入到 html 中的图像 如果我从其他网站借用图像 我知道如何获取图像的 URL 如何获取文件夹中但尚未出现在互联网上的图像的 URL 我是否必须将图像上传到其他网站
  • 将引导程序弹出框保留在视口内

    我正在尝试使用带有按钮的侧边栏创建一个菜单 每个按钮都有一个指定的包含相关数据的弹出窗口 不幸的是 其中一个弹出窗口可能包含任意数量的行 并且在某些情况下它可能部分位于视口之外 See http jsfiddle net bfd9f 1 h

随机推荐

  • Cmake:基于变量内容的 add_custom_command 参数

    我想要一个 Cmake 函数来将一些二进制文件复制到特定位置 为此 我有以下函数定义 function collect binaries TARGET NAME DEST DIR set targetsToCopy ARGN set cop
  • 如何使用 Jasmine 模拟另一个模块中所需的模块

    const Client require src http client module exports handler gt const client new Client const locationId client getLocati
  • 用于测试分布式系统的集成测试框架?

    我有一个分布式系统 其组件分布在多个盒子中 他们使用 TCP 或多播相互通信 每个组件相互交换消息 这些基本上是序列化的数据结构 我们有哪些集成测试框架来测试此类系统 我熟悉红宝石 所以基于红宝石的东西肯定会有所帮助 我想有不同的方法可以做
  • 两个变量相减

    我正在使用 Jasper 报告设计我的报告 我有一份收入支出报告 其中我使用变量获得总收入TOT INCOME和使用第二个变量的总费用 TOT EXPENSES 我需要减去两个变量才能得到净利润 所以我创建了第三个变量TOT PROFIT
  • Cordova/Phonegap:WP8.1 导航栏重叠

    我的 cordova 应用程序是为 WP 8 0 Target 构建的 当在没有硬件按钮但有可切换导航栏的 WP8 1 设备上运行它时 HTML 内容会被导航栏重叠 隐藏导航栏时 导航栏的黑色背景将保留并仍然与 HTML 重叠 还可以滚动整
  • 如何在保存打印页面时为文件创建自定义文件名?

    在这里 我通过 window print 事件打印页面 在打印之前 我需要保存此页面 因为我需要在此事件中硬核文件名 a href img class noPrint src Images Print icon png border 0 a
  • 从测试台访问 uvm_config_db 的最佳方式?

    我想在我的顶级测试平台中创建一个时钟 其周期可以通过测试进行控制 我所做的是将周期设置到 uvm config db 中并将其返回到测试台中 我必须输入 1 以确保构建阶段已完成 否则 get 返回错误值 module testbench
  • CakePHP 连接在浏览器中被拒绝

    我正在第一次设置 学习 CakePHP 我正在努力弄清楚为什么我无法通过默认端口 8765 访问我的服务器 我喜欢在 ubuntu 机器上进行开发并远程处理代码 该服务器托管在我本地计算机上的虚拟机上 但我将其称为远程计算机 服务器和我的远
  • lua 垃圾收集器调试输出的最佳方法是什么?

    我需要一个游戏状态对象在 lua 中 不是 C 或与 C 绑定 管理来自我的 C 引擎的灯光 相机 对象 事件 lua 对象是与 c 不同的实体 几乎只是标准的 lua 表 我担心 GC 将如何删除这些对象 因为它们将被动态创建和删除 打开
  • 从真值表创建降序二元决策图 (ROBDD)

    是否有一个软件包 最好是应用程序 而不是库 可以根据给定的真值表 以某种文本格式 创建降序二元决策图 ROBDD 你也可以尝试这个 http formal cs utah edu 8080 pbl BDD php http formal c
  • Pygal 子图(几张图)

    我想在 python 2 7 上使用 Pygal 创建一个仪表板 同一窗口中的多个图 但后者没有 subplot 功能 有没有不使用散景或情节的解决方案 Matplotlib 上的示例 fig axes plt subplots ncols
  • 无法找到此循环的大 O 时间

    我正在尝试查找以下代码片段的 Big O 运行时间 for i 0 i lt n n i for j 0 j lt i j k 我不确定由于 n 的乘法 它是否会是 O n 3 或者只是 O n 2 一些帮助将不胜感激 内部循环将执行 0
  • 使用 AudioKit for iOS < 11 进行离线音频渲染

    我有 4 个AKPlayer节点 每个节点都连接到一些效果 最后它们混合在一起 我想离线渲染 iOS gt 9 0 的输出 但我不知道如何做 编辑 我已经实现了渲染并将其分离为 iOS gt 11 虽然 iOS gt 11 renderTo
  • 无法读取 null 的属性“getHostNode”

    我有一个带有 React 路由器的 Horizo n React 应用程序 并且我的应用程序中有一个简单的按钮 Another Search 当我点击它时 出现以下异常 Uncaught TypeError Cannot read prop
  • Redux Saga 异步/等待模式

    我在整个代码库中使用 async await 因此 我的 api 调用是由异步函数定义的 async function apiFetchFoo return await apiCall 我想从我的传奇代码中调用这个函数 看来我不能这样做 D
  • 用户看到深度嵌套状态的一部分,可见属性是否应该位于顶层?

    我正在开发一款游戏 最初 用户处于单个地牢中 具有以下属性 state health 95 creatures bigBoss lightIsOn true goldReward 54 you get the idea 现在有很多王国 很多
  • C# DateTime ToString 标准区域性格式

    我可以更改特定区域性的 DateTime 的标准输出格式吗 例子 class Program static void Main string args PrintCultureDateTime ca ES PrintCultureDateT
  • 防止圆圈重叠

    我正在尝试找出 JavaScript 数学来将两个碰撞的圆移开 该图像的左侧是我已经拥有的内容的视觉表示 x1 y1 x2 and y2 are the positions of the circles r1 and r2 are the
  • 如何在 HSQL Db 内存单元测试中启用引用完整性

    我对整个 JPA 后端进行了 200 多个单元测试 它们在 hsql db 2 2 上都运行良好 我在连续构建环境中运行测试来验证系统的稳定性 除了当我在 Oracle 11 上运行它们时 一些测试因引用完整性约束而失败 这是由于我的代码中
  • CSS 在悬停时从不同元素更改元素内容

    是否可以in CSS当鼠标悬停在不同的元素上时更改元素的内容 举例来说 我有这个 div A B C D E F 当我将鼠标悬停在 B 中时 我想在 A 中显示一些文本 如果我将鼠标悬停在 C 中 A 中将会出现不同的文本 其余的也一样 当