个人中心
gpt4 book ai didi

html - 如何使用悬停效果一次更改 2 个 div 的边框颜色

转载 作者：太空宇宙 更新时间：2023-11-03 23:40:52 24 4
gpt4 key购买 nike

如何更改外部 div #refdocs_main 的边框颜色，同时更改 div #refdocs_container 的底部边框颜色？现在，悬停时只有外部容器的边框是彩色的；如何使用 CSS 同时获得两种效果？

这是一个 fiddle :http://jsfiddle.net/Nb8cC/到目前为止我已经尝试过:

HTML

<body>
    <div id="refdocs_main">
        <div id="refdocs_container"><input type="text" id="refdocs">
        </div>
        <div id="refdocs_wrapper">
            <div id="refdocs_list">
                <ul></ul>
            </div>
        </div>
    </div>          
</body>

CSS

#refdocs {
    border: 0;
    width: 100%;
    height: auto;
    padding-left: 2px;
}

#refdocs_main {
    border: 1px solid rgb(170,170,170);
    width: 179px;
    overflow: hidden;
    margin-top: 2px;
}

#refdocs_main:hover {
    border-color: rgb(128,128,128);
}

#refdocs_container {
    border-bottom: 1px solid rgb(170,170,170);
    height: 20px;
}

#refdocs_wrapper{
    height: 100px;
    overflow-y: scroll;
    overflow-x: hidden;
}

#refdocs_list {
    width: 100%;
}

#refdocs_list ul {
    margin: 0;
    padding: 0px;
    list-style-type: none;
}

#refdocs_list li {
    cursor: default;
    padding: 2px;
}

最佳答案

使用:

#refdocs_main:hover, #refdocs_main:hover #refdocs_container {
    border-color: rgb(128, 128, 128);
}

通过添加 #refdocs_main:hover #refdocs_container，您可以使 #refdocs_container 上的边框仅在 #refdocs_main 悬停时更改。

jsFiddle example

关于html - 如何使用悬停效果一次更改 2 个 div 的边框颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22920349/

24 4 0
文章推荐： c# - AppBar WP8.1里面的自定义控件
文章推荐： 我可以为自定义日志记录功能启用格式警告吗？
文章推荐： c# - 'system.argumentexception' 上传多部分时
文章推荐： node.js - 限制在 Sails.js 模型中设置字段
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com