Question

如何在更改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;
}

Answer 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

Answer 2

添加：

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

到你的css样式表。

当#refdocs_main悬停在#refdocs_container元素上时会显示，{{1}}元素应用以下更改。

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

2 个答案: