悬停状态保持不变，直到其他东西悬停答案

【问题标题】：Hover state remains until something else is hovered悬停状态保持不变，直到其他东西悬停
【发布时间】：2012-03-15 15:34:34
【问题描述】：

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

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:none，当添加该类时，它是 display:block。我需要帮助的部分是让课程保持在 mouseout + 上，直到其他东西被鼠标悬停。

非常感谢，任何帮助将不胜感激。

【问题讨论】：

你尝试过什么吗？或者也许在询问之前搜索过？ stackoverflow.com/questions/1333546/…
尝试使用 .mouseover() 和 .mouseout() 触发工具提示以删除/隐藏工具提示api.jquery.com/mouseover
我已经在悬停时添加了一个类。我的 Jquery 非常基础，我不明白如何调整其他线程的代码来为我工作。 $('.parts a span').mouseover(function() { $(this).addClass('selected'); $(this).removeClass('selected'); });

标签： jquery hover tooltip

【解决方案1】：

在您的mouseover 上选择（如果存在）带有showinfo-class 的元素并删除该类。

之后，将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');
    });

【讨论】：

没问题，我编辑我的答案给你一些实现提示。
非常感谢您抽出宝贵的时间来写这篇文章，但是当它被添加到另一个元素时，它并没有删除以前元素的 showinfo 类。
确实如此，我只是错过了选择器中的.。你可能已经明白了：-p 注意：复制和粘贴不会提高编程技能。
非常感谢，我正在努力学习 JQuery，但在 atm 的基础上还不够。
没问题。我不想冒犯，对不起，如果是这样的话。

【解决方案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>

【讨论】：

这需要在html中使用'title'元素吗？
没有。无需在 html 中添加标题元素。 .attr() 将 'title' 属性添加到您悬停的 div 上。上面的代码你试过了吗？

【解决方案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>

【讨论】：