CSS/JS 解决方案:在子元素悬停时,更改父 div

2023-12-07

我知道CSS是“级联”的,但在这种情况下我希望效果上升。我对 JS 或 CSS 解决方案持开放态度,但老实说,我更喜欢代码量或开销最少的解决方案。

当我将鼠标悬停在(子)字母上时,我希望整个窗口的整个背景颜色发生变化,而不仅仅是子元素。每个字母都包含在填充整个窗口(或正文)的父#word div 中。

如果 css 中存在类似下面的内容,那就太好了:

#h:hover #word{
    background-color: rgba(0, 102, 0, .5);
}

但这不起作用。有人有主意吗??

HTML:

<div id="word">
    <h1><a id="h" class= "letter" href=#>H</a></h1>
    <h1><a class= "letter" href=#>E</a></h1>
    <h1><a class= "letter" href=#>L</a></h1>
    <h1><a class= "letter" href=#>L</a></h1>
    <h1><a class= "letter" href=#>O</a></h1>
</div>

CSS:

    body {
        /*font-family: 'Sigmar One', cursive;*/
        font-family: 'Chango', cursive;
        font-size: 115px;
        color: white;
        text-shadow: 5px 5px 5px #000;
        /* background-color: #0047b2 */
        width: 100%;
        height: 100%;
        margin: 0px;
        background: url(img/texture.png) repeat; 

    }

    #word {
        position:absolute; 
        height:100%; 
        width: 70%;
        display: table;
        padding: 0 15% 0 15%;
        background: rgba(0, 71, 178, .5);
    }

    h1 {
        display: table-cell;
        vertical-align: middle;
        text-align:center;
        height: 1em;

    }

    a {
        /*border: 1px solid black;*/
        display: inline-block;
        line-height: 100%;
        overflow: hidden;

    }

    a:visited, a:active {
        text-decoration: none;
        color: white;
        /*color: #E8E8E8;*/

    }

    a:link {
        text-decoration: none;
        color: white;
        text-shadow: 3px -3px 0px black, -2px 2px 5px #0056b2;

    }

    a:hover {
        text-shadow: 5px 5px 5px #000;
        color: white;
    }

    #h:hover #word{
        background-color: rgba(0, 102, 0, .5);
    }

    @media (max-width: 1330px){
        #word {
            width: 100%;
            padding: 0px;

        }
    }

Fiddle: http://jsfiddle.net/SZ9ku/1/


解决方案可能是 JS:

$(".letter").hover(function() {
    $(this).closest("#word").toggleClass("hovered")
});

这是一个小提琴:http://jsfiddle.net/zT9AS/2

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

CSS/JS 解决方案:在子元素悬停时,更改父 div 的相关文章

随机推荐

  • 在循环中调用 utl_file.put 时 UTL_FILE.WRITE_ERROR

    我的 PL SQL 过程中有以下代码 我在 API XXX put 中调用了它 它调用utl file put 在 while 循环中 l xmldoc 是来自 getReportXML 函数的 CLOB 该函数返回 xml clob 我编
  • Android 首选项:当用户未使用首选项屏幕时如何加载默认值?

    我正在使用 PreferenceActivity 让用户设置一些值 我正在向它提供具有定义的首选项的 xml 文件 我已经设置了所有android defaultValue 对于他们来说 当我启动应用程序时 我需要首选项 或者如果尚未手动设
  • 简化自然色的漂亮印刷

    假设我编写了一个用于反转列表的函数 我想用value命令 只是为了向自己保证我可能做对了 但输出看起来很糟糕 value reverse 1 8 3 gt 1 1 1 1 1 1 1 1 1 1 1 1 a list 如果我告诉伊莎贝尔将这
  • attr 作为 css 选择器中的属性[重复]

    这个问题在这里已经有答案了 可能的重复 按样式属性的 CSS 选择器 html div div 在CSS中我想使用这个家庭值 例子 div font family attr data family Family 可以是任何字符串 如何让它发
  • 将 TabItem 添加到现有 TabControl WPF/MVVM

    I have TabControl已经定义了一些TabItems on XAML 我需要创建新的TabItems并添加到其中 如果我使用ItemSource我得到一个例外Items collection must be empty befo
  • 我可以在 PHP 中使用运算符作为函数回调吗?

    假设我有以下功能 function mul return array reduce func get args 是否可以使用 运算符作为回调函数 还有其他办法吗 在这种特定情况下 使用array product function mul r
  • 更改 EF Core 中的 MigrationsHistoryTable 列名称

    我在 EF Core 数据库中有一个标准化的所有表和列名称 以使用 Snake case 我能够更改迁移历史记录表名称和架构以匹配数据库的其余部分 但我无法找到更改列的方法MigrationId to migration id and Pr
  • Sleep() 或 sleep() 的准确度如何

    我正在尝试模拟按下键和按下键的动作 例如 2638 毫秒 SendMessage hWnd WM KEYDOWN keyCode 0 Sleep 2638 SendMessage hWnd WM KEYUP keyCode 0 你怎么知道它
  • golang中解析日期

    请帮我解析日期 例如2018 12 17 12 55 50 0300在戈兰 我正在尝试布局 layout 2006 01 02 15 04 05 0000 dateString 2018 12 17 12 55 50 0300 t err
  • 错误 310(net::ERR_TOO_MANY_REDIRECTS):

    这是什么错误 Error 310 net ERR TOO MANY REDIRECTS There were too many redirects 我使用 PHP CodeIgniter 和库简单登录安全 这是我的代码 if this gt
  • Rails 3 Action Mailer 未初始化常量

    我正在尝试使用 actionmailer 在发布新评论时通知我 但我不断收到错误 uninitialized constant CommentsController CommentMailer 该评论已添加到我的数据库中并且可以查看 我也在
  • Access SQL 中的 Select Case 等效项是什么?

    我有一个查询 其中包含名为的字段期初余额 and 佣金 我想计算值佣金基于期初余额 与此类似Select CaseAccess VBA 中的块 Select Case OpeningBalance Case 0 To 5000 commis
  • Genymotion 初始化引擎:IntelliJ 中失败

    我下载了 Genymotion 和 Genymotion IntelliJ 插件 我在 Intellij 中设置了 Genymotion 路径 指示 https cloud genymotion com page doc collapse
  • cmis或web脚本使用?

    我想使用 alfresco 和 activiti 工作流引擎构建一个 JavaEE GED 应用程序 用于管理和监控组织的邮件 信件 传真 邮件等 由于我是 alfresco 的新手 我想知道在我的情况下与 alfresco 进行通信的最佳
  • 将自定义图像显示为 geom_point [重复]

    这个问题在这里已经有答案了 是否可以在 R ggplot 中将自定义图像 例如 png 格式 显示为 geom point library png pic1 lt readPNG pic1 png png Heatmap png units
  • 使用 JSR-223 从 Jython 脚本获取数据

    我正在使用 Jython 2 5 1 和 JSR 223 即 javax script 包 并且我希望返回 Python 脚本的最后一行 例如 在评估此脚本后 class Multiplier def multiply self x y r
  • 如何将值从 Red/System 传递到 Red?

    我需要将在 Red System 中生成的值传递给 Red 我发现了文档 但没有找到如何使用它的示例 这是我的代码 Red system data alias struct a integer b c string data declare
  • 在 CSS 中强制孩子服从父母的弯曲边框

    我有一个 div 位于另一个 div 中 outer and inner outer有弯曲的边框和白色的背景 inner没有弯曲的边框和绿色背景 inner延伸到弯曲边界之外 outer 有办法阻止这一切吗 outer display bl
  • 在 Linux shell 脚本中并行运行 python 命令

    我有一个脚本 它通过命令行参数从用户那里获取输入 它处理参数并开始运行 python 命令 例如 run sh p1 p2 p3 p4 python abc py p1 p4 python xyz py p2 p3 where p1 p2
  • CSS/JS 解决方案:在子元素悬停时,更改父 div

    我知道CSS是 级联 的 但在这种情况下我希望效果上升 我对 JS 或 CSS 解决方案持开放态度 但老实说 我更喜欢代码量或开销最少的解决方案 当我将鼠标悬停在 子 字母上时 我希望整个窗口的整个背景颜色发生变化 而不仅仅是子元素 每个字