Блог

Главная - Вопросы по программированию - всплывающий div при наведении курсора мыши на переключатель

всплывающий div при наведении курсора мыши на переключатель

#javascript #jquery #asp.net

#javascript #jquery #asp.net

Вопрос:

У меня есть три варианта переключения:

  • Нет
  • Плавающий влево
  • Плавающий вправо

поэтому, когда пользователь наводит курсор мыши на переключатель, я просто хочу просмотреть div.

 <asp:radiobuttonlist runat="server" id="rbl" repeatdirection="Horizontal">
    <asp:listitem text="None" value="0" selected="True" enabled="true"/>
    <asp:listitem text="Float Left" value="1" selected="False" enabled="true"/>
    <asp:listitem text="Float Right" value="2" selected="False" enabled="true"/>
</asp:radiobuttonlist>

вот div:

 <div id="divid">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non justo at est sodales molestie vitae id ligula. Proin sed consequat augue. Donec neque nibh, laoreet vel laoreet non, dignissim id lectus. Maecenas pulvinar pretium leo, quis pharetra odio pulvinar at. Integer tincidunt orci eget velit consectetur suscipit. Nullam in augue ut felis volutpat cursus. In mi augue, accumsan vel laoreet nec, scelerisque vitae nibh. Sed quis dolor quam, nec rhoncus lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras varius luctus nulla vel dapibus. Donec aliquam vehicula tincidunt. Suspendisse potenti. Donec at odio lorem. Nam aliquam rhoncus aliquam. Sed posuere tincidunt purus non tristique.
</div>

Комментарии:

1. В этом очень мало смысла. Можете ли вы переписать вопрос?

2. просто обновите мой вопрос, теперь имеет смысл?

Ответ №1:

 $('#<%= rbl.ClientID %>:radio').hover(
    function (){ 
        $('#divid').toggle();
    },
    function (){ 
        $('#divid').toggle();
    }
);

Рабочая демонстрация

демонстрация с использованием диалогового окна пользовательского интерфейса

новая демонстрация, похоже, вызывает проблемы с закрытием диалогового окна, поэтому я пока прокомментировал это

Комментарии:

1. Сложно ответить на вопрос с iPhone

2. Я переформатировал его для вас и добавил код asp, который вставит правильное имя идентификатора для этого элемента управления.

3. @Abu Hamzah рад помочь, теперь, когда я сижу за своим компьютером, я исправил код, чтобы он выглядел так, как задумано

4. при наведении курсора на radiobutton то, что я хочу, это всплывающее окно div, но ваш образец ничего не делает, когда страница загружается, я вижу, что отображается div, но то, что я хочу, это при наведении курсора мыши на radiobutton, только тогда я хочу открыть div.

5. спасибо за подсказку, как я могу всплывать div вместо простого отображения inline?

Ответ №2:

Это то, что вам нужно?

 $("input[name='<%= rbl.ClientID %>']").hover(
       function() { $("#divid").toggle(); }
);

Что-то в этом роде: Демо.

Комментарии:

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

Ответ №3:

Соответствует ли это вашему требованию?

 $(":radio[name='rbl']").hover(function(){ 
    $("#divid").css({
        display: "block",
        position: "absolute",
        left: ($(this).offset().left   $(this).width())   "px",
        top: $(this).offset().top   "px"
    });
},
function(){
     $("#divid").hide();   
});

Комментарии:

1. не сработало, ничего не отображается при наведении курсора мыши или нажатии на радиокнопку