скольжение нового текстового поля при наведении на текст

0

Я хочу, чтобы при наведении мыши на конкретный текст новое текстовое поле должно было сместиться из него, содержащее некоторые флажки.

  • 1
    что пробовал ??
  • 0
    Вы хотите флажки с текстовым полем?
Показать ещё 1 комментарий
Теги:

3 ответа

1 
<span onMouseEnter="showDiv()" onMouseLeave="HideDiv()">My text</span>
<input type="text" id="container" style="display:none"><input type="checkbox"/></div>

<script>
    function showDiv()
    {
        $("#container").show();
    }

    function hideDiv()
    {
        $("#container").hide();
    }
</script>
Поделиться
  • 0
    хороший ответ, но он спросил: «Новое текстовое поле должно соскользнуть с него, содержащее несколько флажков». так что измените <div id = "container" style = "display: none"> ** <input type = "text" style = "width: 200px" /> ** <input type = "checkbox" /> </ div>
0

Вот один из разделов HTML, CSS и Javascript и анимация при показе и скрытии.

Проверьте следующую скрипку

http://jsfiddle.net/UQE2F/1/

Hope this helps.
Поделиться
  • 0
    Спасибо!! но я хочу, чтобы раскрывающийся список сохранялся до тех пор, пока я не перейду к другому тексту, который также будет иметь аналогичный раскрывающийся список.
  • 0
    Привет, согласно вашему требованию, я внес некоторые изменения, проверьте обновленный пример jsfiddle -------- ссылка jsfiddle.net/UQE2F/3
Показать ещё 3 комментария
0

HTML:

<div onmouseover="document.getElementById('div1').style.display = 'block';" onmouseout="document.getElementById('div1').style.display = 'none';">My text</div>
 <div id="div1"><input type="checkbox" name="mycheckbox"/>Mycheckbox</div>

CSS:

#div1
    { display:none; }

См. Скрипку: http://jsfiddle.net/Kritika/mrEC5/

Пожалуйста, найдите обновленный код ниже.

HTML

    <ul class="link">
    <li>
        <label id="1" class="check"><input  type="checkbox" /> Checkbox One</label>

        <ul  id="checkbox-container1" class="hidden">
            <li>
            <label><input type="checkbox" /> Checkbox One</label>
            </li>
            <li>
            <label><input type="checkbox" /> Checkbox Two</label>
            </li>
            <li>
            <label><input type="checkbox" /> Checkbox Three</label>
            </li>
        </ul>
    </li>
    <li>
        <label id="2" class="check"><input  type="checkbox" /> Checkbox One</label>

        <ul  id="checkbox-container2" class="hidden">
            <li>
            <label><input type="checkbox" /> Checkbox </label>
            </li>
            <li>
            <label><input type="checkbox" /> Checkbox </label>
            </li>
            <li>
            <label><input type="checkbox" /> Checkbox </label>
            </li>
        </ul>
    </li>
</ul>

CSS:

.hidden{
    display:none;
}
ul li{list-style:none;}

Автор сценария:

$(function(){ 
    // shows checkboxes on mouseover and hides them on mouseout
    $( "ul.link li .check" ).hover(       
        function(e) {
            var id1=this.id;             
            $("#"+id1).closest('ul').find('#checkbox-container'+id1).slideDown();          
        }, function(e) {
            var id2=this.id;          
            $(this).closest('ul').find('#checkbox-container'+id2).slideUp();           
        }
    );
});

Найдите рабочую скрипту: http://jsfiddle.net/Kritika/UQE2F/7/

Поделиться
  • 0
    спасибо :) это работает, но я хочу, чтобы это открылось, как новое окно скользит от текста. пожалуйста помоги!! я действительно застрял здесь
  • 0
    @ user1532663: Я буду рад помочь. Вы можете четко объяснить? не могу получить ваше требование
Показать ещё 2 комментария

Ещё вопросы

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