CODEWITHSUNDEEP
htmlcsshover
Jason Kelly
Jason Kelly

Reputation: 2655

How do I change the border color of 2 divs at once using the hover effect

How can I change the border-color of my outer div #refdocs_main while also changing the bottom border color of my div #refdocs_container? Right now, only the outer container's border is colored on hover; how can I get both effects using CSS simultaneously?

Here is a fiddle: http://jsfiddle.net/Nb8cC/ And what I've tried so far:

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;
}

Upvotes: 0

Views: 98

Answers (2)

Jason Aller
Jason Aller

Reputation: 3652

Add:

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

to your css stylesheet.

This reads when #refdocs_main is hovered over then for the #refdocs_container element apply the following changes.

Upvotes: 0

j08691
j08691

Reputation: 207901

Use:

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

By adding #refdocs_main:hover #refdocs_container you enable the border on #refdocs_container to change only when #refdocs_main is being hovered.

jsFiddle example

Upvotes: 3

Related Questions