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，显示：无; 我希望悬停的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/

Answer 2

除非btn_desc1是green_btn的孩子，否则无法执行此操作，但这样做会有效：

.green_btn:hover > .btn-desc_1
{
    display:inline-block;
}

使用此HTML：

<div class="btn_lists">
    <div class="btn green_btn">
        <img width='400px' heigh='400px' src="http://www.pieisgood.org/images/slice.jpg" />
        <div class="btn-desc_1">
        <p>Description</p>
    </div>
</div>

在你的CSS中

。但是，您可以使用JQuery来实现目标，例如 nidzik 说：

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

<强> Here's the demo

Answer 3

恐怖主义几乎回答。可能非常不可靠。它仅用于演示，不要使用它。而不是悬停它而不是单击图像：

只有IE9 +支持

:checked：https://developer.mozilla.org/en-US/docs/Web/CSS/:checked

实例，点击小猫：http://jsfiddle.net/bzH7S/2/

<body>
    <input type="radio" name="btn" value="1" id="radio1">
    <input type="radio" name="btn" value="2" id="radio2">
    <div id="wrap">
        <div class="btn_lists">
            <label for="radio1" class="btn btn1"><img src="1"></label>
            <label for="radio2" class="btn btn2"><img src="2"></label>
        </div>
        <div class="btn-desc-container">
            <div class="btn-desc_1"><p>Kitten One</p></div>
            <div class="btn-desc_2"><p>Kitten Second</p></div>
        </div>
    </div>
</body>

CSS：

body > input {
     display: none;
}

.btn-desc-container > div {
    display: none;
}

#radio1:checked ~ #wrap .btn-desc_1,
#radio2:checked ~ #wrap .btn-desc_2 {
    display: block;
}

对兄弟姐妹的影响

3 个答案: