html - 对同级 div 的影响

Question

我有两个兄弟 div，其中包含更多的 div，如下所示:

<div class="btn_lists">
    <div class="btn green_btn">
        <img src="<?= asset_url() ?>images/escolar_07__1.png" />
    </div>
</div>
<div class="btn-desc-container">
    <div class="btn-desc_1">
        <p>Description</p>
    </div>
</div>

默认我有 btn-desc_1 和 display: none; 我希望悬停的 green_btn 应用 display: inline-block;在 btn-desc_1

我怎样才能有效地做到这一点？

Answer 1

无法通过 CSS 实现此目的。使用jquery一段代码:

$('.green_btn').hover(function(){
    $('.btn-desc_1').toggleClass('display-inline');
})

喜欢演示:http://jsfiddle.net/nidzix/sWQr9/3/