Состояние наведения остается до тех пор, пока что-то еще не появится - PullRequest
Новая
       7

Состояние наведения остается до тех пор, пока что-то еще не появится

0 голосов
/ 15 марта 2012

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

HTML 

       <div class="man">
         <div class="parts">
           <div class="cc-head"><a href="#"><span>Text Head</span></a></div>
           <div class="cc-neck"><a href="#"><span>Text Neck</span></a></div>   
         </div>
       </div>

Это Jquery, который у меня есть, 

$(document).ready(function() {
   $('.parts div a').mouseover(function() {
      $(this).addClass('showinfo');
   });
});

Он настроен на отображение: по умолчанию нет, а когда этот класс добавлен, это display: block. Часть, в которой мне нужна помощь, заключается в том, чтобы класс оставался даже при наведении мыши + до тех пор, пока что-то еще не будет выделено мышью.

Большое спасибо, любая помощь будет высоко ценится.

Ответы [ 3 ]

1 голос
/ 15 марта 2012

На вашем mouseover выберите (если есть) элемент с showinfo -классом и удалите класс.

После этого примените showinfo к вашему элементу наведения.Должно быть не проблема для вас.

Таким образом, класс будет оставаться в этом элементе, пока какой-то другой элемент не будет найден.

Реализация:

0 голосов
/ 15 марта 2012

С приведенным ниже решением, я надеюсь, что ваша проблема решена .. 

<html>

  <head>

    <style type="text/css">

        .tooltip 
        {
            position:absolute;

            border:1px solid gray;
            border-radius: 3px;

            background-color:rgba(0,0,0,0.2);
            padding:5px;

            color:white;
            font-size: 12px;
        }

    </style>

   <script type="text/javascript" src="jquery.js"></script>

   <script type="text/javascript" >

       $(document).ready(function(){

            $(".cc-head").hover(function(){

                var tooltip_text = $(this).children().children().html(); //contains the data present inside 'span' element

                $('<p class="tooltip"></p>').html(tooltip_text).appendTo('body').fadeIn('slow'); //showing the tooltip

            }, function() { // remove the tooltip as soon as it goes outside the div

                $('.tooltip').remove();

            }).mousemove(function(e) {

                var x_pos = e.pageX + 15; //calculating the position of tooltip from x-axis, pageX gives the current position of mouse pointer from x-axis
                var y_pos = e.pageY + 10; //calculating the position of tooltip from y-axis, pageY gives the current position of mouse pointer from y-axis

                // assigning the css to .tooltip
                $('.tooltip').css('left',x_pos);
                $('.tooltip').css('top',y_pos); 

        });

       });

  </script>

 </head>

 <body>

   <div class="man">

         <div class="parts">

           <div class="cc-head"><a href="#"><span>Text Head</span></a></div>
           <div class="cc-head"><a href="#"><span>Text Neck</span></a></div> 

         </div>
   </div>

 </body>

</html>
0 голосов
/ 15 марта 2012

После ответа на ответ, опубликованный 'psychotik', Как отобразить всплывающую подсказку при наведении курсора с помощью jQuery?

Я думаю, что приведенное ниже решение должно удовлетворить ваши потребности.Надеюсь, это поможет вам.

Решение:

Jquery Script: 

       $(document).ready(function(){

            $(".cc-head").hover(function(){
                $(this).attr('title',$(this).children().children().html());
            });

       });

html: 

 <div class="man">
         <div class="parts">
           <div class="cc-head"><a href="#"><span>Text Head</span></a></div>
           <div class="cc-head"><a href="#"><span>Text Neck</span></a></div>   
         </div>
   </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...