The kicker is the default state. You want a specified section of the accordion to be open if the accordion itself isn't being interacted with.

The trick is nested hover states.

The Markup

<div class="accordion">
    <section>
        <h1>Section 1</h1>
        <div class="accordion_content">
            <p>Content for section 1</p>
        </div>
    </section>
    <section>
        <h1>Section 2</h1>
        <div class="accordion_content">
            <p>Content for section 2</p>
        </div>
    </section>
    <section class="default">
        <h1>Section 3</h1>
        <div class="accordion_content">
            <p>Content for section 3</p>
            <p>This is my default state.</p>
        </div>
    </section>
    <section>
        <h1>Section 4</h1>
        <div class="accordion_content">
            <p>Content for section 4</p>
        </div>
    </section>
</div>

The CSS

Code for the static state (e.g. when nothing is being hovered on) and with no default.

.accordion section > .accordion_content {
    height: 0;
    overflow: hidden;
    transition: height .25s;
}

Next add the hover state style.

.accordion section:hover > .accordion_content {
    height: 6em;
}

We now have a working accordion. That's not all that impressive though. We want one with a specified panel open as default. One that will always be open if the user isn't hovering over a different panel.

Note that the style for the hover state is the same as the default state. So let's add that selector to the rule.

.accordion section:hover > .accordion_content,
.accordion section.default > .accordion_content {
    height: 6em;
}

Ok, now we have a default state, but that one never closes when we are interacting with the other panels. We need a rule that will collapse the default state if we hover over a different panel. We could try using the general sibling selector (~), but we will run into trouble if we want a default open state for any panel other than the last one.

We could try some big complicated set of selectors and rules, but I'm not sure it would actually work, and in any case lets keep the code terse.

The magic

The trick is to use the cascading nature of CSS as well as nested :hover states.

First we want to close ALL panels when hovering over the accordion container.

.accordion:hover > .accordion_content {
    height: 0;
}

Next we want to open the specific panel we are hovering over, remembering that we are already hovering over the accordion container.

.accordion:hover > .accordion_content:hover {
    height: 6em;
}

Well that works, but we have more lines of code here than we need. Let's clean up.

We can combine the accordion container hover selector with our earlier style for the panels that aren't our default

.accordion section > .accordion_content,
.accordion:hover > .accordion_content {
    height: 0;
    overflow: hidden;
    transition: height .25s;
}

We can also replace the earlier hover functionality rule with the nested hover selector. The are functionally equivalent.

.accordion:hover section:hover > .accordion_content,
.accordion section.default > .accordion_content {
    height: 6em;
}

Bam! There we have it. A terse, All CSS, hover activated accordion with a default state.

.accordion:hover section:hover > .accordion_content,
.accordion section.default > .accordion_content {
    height: 6em;
}

.accordion section > .accordion_content,
.accordion:hover section > .accordion_content {
    height: 0;
    overflow: hidden;
    transition: height .25s;
}

Everything after that is aesthetics.

Checkout the Codepen demo