Влияние на родного брата

0

У меня есть два родных брата div, в которых есть больше divs, таких как:

<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 с отображением: none; Я хочу, чтобы зависающий green_btn применял отображение: inline-block; на btn-desc_1

Как я могу сделать это эффективно?

  • 0
    что ты пробовал? если вы используете новейшую технологию, она не будет поддерживаться всеми браузерами, я уверен, что это можно сделать с помощью html5 и CSS3
  • 0
    я пытался использовать соседний селектор, как это, .btn_lists green_btn: hover + .btn-desc-container .btn-desc_1
Показать ещё 1 комментарий
Теги:

3 ответа

0
Лучший ответ

Ужасный почти-ответ. Наверное, очень ненадежный. Это только для демонстрации, не используйте ее. Вместо того, чтобы зависать, он работает с нажатием на изображения:

:checked поддерживается только с помощью IE9+: 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;
}
Поделиться
  • 0
    Это круто, я не думаю, что буду использовать это, но все равно круто. Вероятно, лучший вариант только CSS.
  • 0
    Возможно, вам захочется установить видимость скрытой и положение для абсолютирования на входах, чтобы увеличить шансы его работы в большем количестве браузеров. Этот подход будет работать на большинстве современных браузеров.
Показать ещё 1 комментарий
1

Невозможно достичь этого с помощью CSS. Используйте кусок кода jquery:

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

как демо: http://jsfiddle.net/nidzix/sWQr9/3/

Поделиться
0

Нет способа сделать это, если 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');
})

Здесь демо

Поделиться
  • 1
    .btn-desc_1 не является прямым потомком .green_btn, это не сработает
  • 1
    Это не сработает, потому что .btn-desc_1 не является потомком .green_btn.
Показать ещё 6 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню