добавление div в тег div для отображения при наведении

Question

добавление div в тег div для отображения при наведении

0

Я хочу добавить div в мой тег, и когда я навещу над тегом, я бы хотел отобразить div. Как я могу сделать то, что у меня есть?

<div class="accordion-heading">
  <a class="ui_title accordion-toggle text_x-large unit_accordion_toggle" data-toggle="collapse"></a>
  <i class="icon icon_grey icon_user float_right" style="margin-top:-30px; margin-right:16px"></i>
</div>

Masriyah 17 дек. 2013, в 16:33

Источник

0

Вы спрашиваете, как добавить тег div (вручную), который затем отображается / скрывается при наведении курсора (jquery), или вы спрашиваете, как добавить тег div и показать / скрыть его при наведении курсора на все в jquery?
Floris 17 дек. 2013, в 15:14

Теги:

javascript

jquery

html

css

4 ответа

2

Сначала вы можете добавить <div> внутрь:

<div class="accordion-heading">
    <a class="ui_title accordion-toggle text_x-large unit_accordion_toggle" data-toggle="collapse">
    </a>
    <i class="icon icon_grey icon_user float_right" style="margin-top:-30px; margin-right:16px"> </i>
    <div class="hidden">This is the div to show</div>
</div>

Второй скрыть div:

.hidden {
   display:none;
}

Наконец, установите селектор CSS :hover на внутренний div:

.accordion-heading:hover .hidden{
  display:block;
}

Демо-версия http://jsfiddle.net/gEWve/3/

DaniP 17 дек. 2013, в 12:34

1

Использование CSS над Javascript - это путь
zgr024 17 дек. 2013, в 15:17

1

Я просто хотел добавить, что вы можете использовать переход fade на элементе с css, установив непрозрачность в 0 и затем до 100 при использовании -webkit-перехода.

Примечание: поддерживается только в современных браузерах, использующих webkit

a div{
    opacity: 0.0;
    -webkit-transition: 0.5s;
}
a:hover div{
    opacity: 1.0;
    -webkit-transition: 0.5s;
}

http://jsfiddle.net/xV62K/

zgr024 19 дек. 2013, в 17:54

1

$("#accordion-heading").hover(function(){
    $(this).append("<div id='some_div'>Text goes here</div>")
},function(){
    $("#some_div").remove();
});

Если у вас уже есть скрытый div в вашем оригинальном div, было бы проще просто показать и скрыть его.

<div class="accordion-heading">
    <a class="ui_title accordion-toggle text_x-large unit_accordion_toggle" data-toggle="collapse">
    </a>
    <i class="icon icon_grey icon_user float_right" style="margin-top:-30px; margin-right:16px"> </i>
    <div id="childdiv" style="display:none">This is the div to show</div>
</div>

 $("#accordion-heading").hover(function(){
        $("#childdiv").show();
 },function(){
        $("#childdiv").hide();
 });

scrblnrd3 17 дек. 2013, в 12:37

0

@ zgr024 Я думаю, что я обновил его для того, что он хотел
scrblnrd3 17 дек. 2013, в 15:18
0

ХОРОШО. Ответ с использованием JavaScript является приемлемым и хорошим справочным материалом
zgr024 17 дек. 2013, в 15:19
0

Он пометил это Javascript и jQuery, и мы все знаем, что вам никогда не хватит jQuery
scrblnrd3 17 дек. 2013, в 15:23

Показать ещё 1 комментарий

Ещё вопросы

Вы спрашиваете, как добавить тег div (вручную), который затем отображается / скрывается при наведении курсора (jquery), или вы спрашиваете, как добавить тег div и показать / скрыть его при наведении курсора на все в jquery?
Использование CSS над Javascript - это путь
@ zgr024 Я думаю, что я обновил его для того, что он хотел
ХОРОШО. Ответ с использованием JavaScript является приемлемым и хорошим справочным материалом
Он пометил это Javascript и jQuery, и мы все знаем, что вам никогда не хватит jQuery

SW4 · Accepted Answer · 2013-12-17T13-50-00.000Z

Как ЭТО?

HTML

<a href='#'>
    Show Content
    <div>Content</div>
</a>

CSS

a div{
    display:none;
}
a:hover div{
    display:inline-block;
}