Question

我想创建一个悬停工具提示，显示跨度内的内容并保持不变，直到另一个元素悬停在其上。

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');
   });
});

它设置为默认显示：none，当该类添加时，显示：block。我需要帮助的部分是让类保持在mouseout +上，直到其他东西被鼠标移除。

非常感谢，非常感谢任何帮助。

Answer 1

在mouseover选择（如果存在）元素showinfo - 上并删除该课程。

之后，将showinfo应用于您的悬停元素。对你来说应该没问题。

这样，该类将保留在该元素上，直到其他元素被悬停。

实现：

  $('.parts div a').mouseover(function() {
       // remove Class if there is an element with class already applied
       $('.showinfo').removeClass('showinfo');
       // Apply your class to this
       $(this).addClass('showinfo');
    });

Answer 2

在复制'psychotik'发布的答案后， How can I display a tooltip message on hover using jQuery?

我认为以下解决方案应该满足您的需求。希望它可以帮到你。

解决方案：

Jquery脚本：

       $(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>

Answer 3

通过以下解决方案，我希望您的问题得到解决..

<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>

悬停状态一直持续到其他东西悬停

3 个答案: