постоянно отображать скрытый div

0

У меня есть следующий код:

    <div id="div3"><img src="" width="20px" /></div>
    <div id="div4">
    ... -> menu
    </div>

который, используя следующее:

    div3{
    position: absolute;
    width: 20px;
    height: 20px;
    left: 50%;
    top: 50%;
    margin-top: -10px;
    margin-left: -10px;
    }


    #div4{
    display: none;
    float:right;
    position: absolute;
    left: 60%;
    top: 50%;
    margin-top: -15px;
    margin-left: -70px;
    }

    #div3:hover + #div4 {
    display: block;
    }

Я делаю шоу div4, после зависания # div3 (который является изображением). Однако я хочу, чтобы div4 появился и остается после раскрытия # div3. Я пробовал пару кодов в jquery, но они не работают.

вы можете помочь?

  • 0
    Я не очень понимаю, пригодится ли z-index?
  • 1
    Вы не можете сделать это с помощью CSS, используйте JavaScript.
Теги:

5 ответов

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

Вы можете (эффективно) сделать это в чистом CSS, чтобы он работал в современных браузерах. Хитрость заключается в использовании очень большого значения для задержки перехода, когда зависание завершается. Как это:

#div3:hover + #div4 { opacity:1; height:20px;transition-delay:0s; }
#div4 { opacity:0; height:0; transition-delay:360000s; }

См. Http://jsfiddle.net/7Fw3A/1/

Поделиться
  • 0
    Это работает сейчас. Понравилась идея «задержки в переходе». Благодарю.
2

Как сказал PHPGlue, вы не можете сделать это с помощью только CSS.

Вы можете сделать что-то вроде этого с помощью jquery, скорректировать код на основе ваших потребностей:

HTML

<div id="one">Hover me!</div>
<div id="two">HELLOO!</div>

JS

$("#one").on("hover", function(){
   $("#two").show(); 
});

FIDDLE

Поделиться
  • 0
    @PHPGlue Я использовал следующий код: <script type = "text / javascript" src = "lib / jquery-1.10.2.min.js"> </ script> <script type = "text / javascript"> $ (" # div3 "). on (" hover ", function () {$ (" # div4 "). show ();}); </ script> но это не работает. Это моя проблема с использованием jQuery, так как это не похоже на перехват идентификаторов селектора или имен классов.
0

Убедитесь, что # div4 всегда отображается во время зависания. Измените свой последний селектор CSS на что-то вроде:

#div3:hover + #div4, #div4:hover {
    display: block;
}

Он все равно исчезнет, когда вы отпустите мышь от div3 и div4, но часто это то, что вы хотите. Если нет, то, вероятно, лучше всего использовать решение jQuery (я уверен, что другие отправят его).

Вы могли бы добавить еще один прозрачный div, который покрывал бы всю высоту и ширину страницы, придавал бы ему высокий z-индекс и следили за тем, чтобы и он, и div4 отображались, когда этот div зависает (как это всегда будет) но это звучит как плохая идея.

Поделиться
  • 0
    Спасибо, однако главной целью является постоянное пребывание "# div4". позвольте мне поиграть с z-index, так как в этом случае было бы неплохо использовать!
0

Я предполагаю, что вы хотите сделать #div4 появляться после того, как вы #div3 над #div3, так что сделайте следующее.

$('#div3').on('mouseover', function () {
  $('#div4').addClass('visible');
  $(this).off('mouseover');
});

Это добавит класс, visible для #div4 когда вы впервые #div3 мыши на #div3. Если вы добавите селектор css .visible { visibility: visible; } .visible { visibility: visible; } то это отрегулирует #div4 css.

Поделиться
0

Как сказал PHPglue, для этого вам нужен Javascript. (это только один пример: не стесняйтесь использовать все, что хотите)

$('#div3').hover(function() {
    $('#div4').css('display', 'block');
}
Поделиться

Ещё вопросы

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