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

【问题标题】：How do I change the border color of 2 divs at once using the hover effect如何使用悬停效果一次更改 2 个 div 的边框颜色
【发布时间】：2014-04-08 02:42:48
【问题描述】：

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

这是一个小提琴：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;
}

【问题讨论】：

标签： html css hover

【解决方案1】：

用途：

#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

【讨论】：

【解决方案2】：

添加：

#refdocs_main:hover #refdocs_container {
    border-bottom: 1px solid red;
}

到您的 css 样式表。

当#refdocs_main 悬停时读取，然后为#refdocs_container 元素应用以下更改。

【讨论】：