jQuery中的淡出_Jquery_Mouseover_Fadein_Fadeout_Mouseout

jQuery中的淡出

jquery

jQuery中的淡出,jquery,mouseover,fadein,fadeout,mouseout,Jquery,Mouseover,Fadein,Fadeout,Mouseout,我正在尝试添加一个Jquery函数，用于更新跨度内链接悬停时的div 我的html结构是 <ul><li> <div class="timeline"> <span>by</span> <span class="vcard"> <a class="underline user-link" href="/users/aruna">Arun

我正在尝试添加一个Jquery函数，用于更新跨度内链接悬停时的div 我的html结构是

  <ul><li>
      <div class="timeline">


         <span>by</span>
         <span class="vcard">
           <a class="underline user-link" href="/users/aruna">Aruna </a>
         </span>
         <div style="display: none;" class="image_hover">
               Student
               <p>
                 <a onclick="" href="#">Show additional details</a>
                 <a href="#">view</a>
                 <p>Employee ID : </p>
                 <p>Project Name: </p>
                 <p>Project Role : r</p>
                 <p>Supervisor Name : </p> 
              </p>
         </div>

         <span class="timeline">about 1 day ago</span>
    </div>
    </li>
    <li>
      <div class="timeline">


         <span>by</span>
         <span class="vcard">
           <a class="underline user-link" href="/users/jasmine">jasmine </a>
         </span>
         <div style="display: none;" class="image_hover">
               Professor
               <p>
                 <a onclick="" href="#">Show additional details</a>
                 <a href="#">view</a>
                 <p>Employee ID : </p>
                 <p>Project Name: </p>
                 <p>Project Role : r</p>
                 <p>Supervisor Name : </p> 
              </p>
         </div>
         <span class="timeline">about 1 day ago</span>
    </div>
    </li>
 </ul>

上面的jquery更新图像hover div，并通过fadeIn显示div，但始终会淡出

只有当鼠标悬停在DIV（image\u hover）或任何主体元素之外时，我才尝试淡出DIV image\u hover

在这种情况下，如果我的鼠标位于链接、div或div内的任何元素（image_hover）上，div不应消失

请对此提出建议

如何做到这一点？？？

您的HTML是问题的一部分。要做到这一点，需要保持开放的区域必须位于触发器标签内，但我也注意到了其他事项：

默认情况下，包含“image\u hover”的DIV是隐藏的（因此无论如何都不起作用）
HTML中没有图像标记可以用作图像悬停（只是看起来很奇怪）
您在两个截然不同的对象上使用了“timeline”CSS类（最上面的DIV和“about 1 day ago”跨度中）…只有1个似乎是timeline
您有两个链接（例如锚定）暗示可能用作切换：“显示其他详细信息”和“查看”（哪一个？）
每个链接切换都位于要切换的链接内
您有一个SPAN来包含单词by（不需要）
考虑将“时间线”标记移出切换区域

因此，我修改了您的HTML并创建了下面的潜在解决方案。这将执行所需的打开“详细信息”区域的行为（并在悬停时保持打开状态）

另外，你真的不需要隐藏“细节”区域……但我还是把它留给你了

<强>同时考虑以下潜在的解决方案：

<html>
<head runat="server">
    <title></title>

    <script src="Includes/JavaScript/jQuery/version1.4.4/Core/jquery-1.4.4.js" type="text/javascript"></script>

    <style type="text/css">
        .vCard
        {
            font-family: Arial;
        }
        .vCard a
        {
             text-decoration: none;
        }
        .vCard a.owner
        {
             color: Green;
        }
        .vCard span.timeline
        {
            color:Navy;
        }
        .vCard span.timeline div.type
        {
            display: none;
        }
        .vCard span.timeline div.type div.details
        {
            display: none;
            margin-left: 20px;
        }
    </style>

    <script type="text/javascript">

        function hoverIn() {

            var card = jQuery(this).parent();
            var cardType = jQuery('div.type', card);

            cardType.fadeIn('fast', function() {
                var cardTypeDetails = jQuery('div.details', this);
                cardTypeDetails.fadeIn('Fast');
            });
        }

        function hoverOut() {

            var card = jQuery(this).parent();
            var cardType = jQuery('div.type', card);

            cardType.fadeOut('fast', function() {
                var cardTypeDetails = jQuery('div.details', this);
                cardTypeDetails.fadeOut('Fast');
            });
        }

        jQuery(document).ready(function() {

            var context = jQuery('#myList');

            // This will target the SPECIFIC timeline object(s).
            jQuery('li div.vCard span.timeline', context).hover(hoverIn, hoverOut);
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
        <ul id="myList">
            <li>
                <div class="vCard">
                    by
                    <a class="owner" href="/users/aruna">Aruna </a>
                    <span class="timeline">
                        about 1 hours ago
                        <div class="type">
                            <a href="#">Student</a>
                            <div class="details">
                                <div>
                                    Employee ID:<label></label>
                                </div>
                                <div>
                                    Project Name:<label></label>
                                </div>
                                <div>
                                    Project Role:<label></label>
                                </div>
                                <div>
                                    Supervisor Name:<label></label>
                                </div>
                            </div>
                        </div>
                    </span>
                </div>
            </li>
            <li>
                <div class="vCard">
                    by
                    <a class="owner" href="/users/jasmine">Jasmine </a>
                    <span class="timeline">
                        about 2 days ago
                        <div class="type">
                            <a href="#">Professor</a>
                            <div class="details">
                                <div>
                                    Employee ID:<label></label>
                                </div>
                                <div>
                                    Project Name:<label></label>
                                </div>
                                <div>
                                    Project Role:<label></label>
                                </div>
                                <div>
                                    Supervisor Name:<label></label>
                                </div>
                            </div>
                        </div>
                    </span>
                </div>
            </li>
        </ul>
    </form>
</body>
</html>


vCard先生
{
字体系列：Arial；
}
.vCard a
{
文字装饰：无；
}
.vCard a.所有者
{
颜色：绿色；
}
.vCard span.timeline
{
颜色：海军蓝；
}
.vCard span.timeline div.type
{
显示：无；
}
.vCard span.timeline div.type div.details
{
显示：无；
左边距：20px；
}
函数hoverIn（）{
var card=jQuery（this.parent（）；
var cardType=jQuery（'div.type'，card）；
cardType.fadeIn（'fast'，function（）{
var cardTypeDetails=jQuery（'div.details'，this）；
cardTypeDetails.fadeIn（'Fast'）；
});
}
函数hoverOut（）{
var card=jQuery（this.parent（）；
var cardType=jQuery（'div.type'，card）；
cardType.fadeOut（'fast'，function（）{
var cardTypeDetails=jQuery（'div.details'，this）；
cardTypeDetails.fadeOut（'Fast'）；
});
}
jQuery（文档）.ready（函数（）{
var context=jQuery（'#myList'）；
//这将针对特定的时间线对象。
jQuery（'li div.vCard span.timeline'，上下文）。悬停（hoverIn，hoverOut）；
});


通过
大约1小时前
员工ID:
项目名称：
项目角色：
主管姓名：


通过
大约两天前
员工ID:
项目名称：
项目角色：
主管姓名：

您的HTML是问题的一部分。要做到这一点，需要保持开放的区域必须位于触发器标签内，但我也注意到了其他事项：

默认情况下，包含“image\u hover”的DIV是隐藏的（因此无论如何都不起作用）
HTML中没有图像标记可以用作图像悬停（只是看起来很奇怪）
您在两个截然不同的对象上使用了“timeline”CSS类（最上面的DIV和“about 1 day ago”跨度中）…只有1个似乎是timeline
您有两个链接（例如锚定）暗示可能用作切换：“显示其他详细信息”和“查看”（哪一个？）
每个链接切换都位于要切换的链接内
您有一个SPAN来包含单词by（不需要）
考虑将“时间线”标记移出切换区域

因此，我修改了您的HTML并创建了下面的潜在解决方案。这将执行所需的打开“详细信息”区域的行为（并在悬停时保持打开状态）

另外,，

<html>
<head runat="server">
    <title></title>

    <script src="Includes/JavaScript/jQuery/version1.4.4/Core/jquery-1.4.4.js" type="text/javascript"></script>

    <style type="text/css">
        .vCard
        {
            font-family: Arial;
        }
        .vCard a
        {
             text-decoration: none;
        }
        .vCard a.owner
        {
             color: Green;
        }
        .vCard span.timeline
        {
            color:Navy;
        }
        .vCard span.timeline div.type
        {
            display: none;
        }
        .vCard span.timeline div.type div.details
        {
            display: none;
            margin-left: 20px;
        }
    </style>

    <script type="text/javascript">

        function hoverIn() {

            var card = jQuery(this).parent();
            var cardType = jQuery('div.type', card);

            cardType.fadeIn('fast', function() {
                var cardTypeDetails = jQuery('div.details', this);
                cardTypeDetails.fadeIn('Fast');
            });
        }

        function hoverOut() {

            var card = jQuery(this).parent();
            var cardType = jQuery('div.type', card);

            cardType.fadeOut('fast', function() {
                var cardTypeDetails = jQuery('div.details', this);
                cardTypeDetails.fadeOut('Fast');
            });
        }

        jQuery(document).ready(function() {

            var context = jQuery('#myList');

            // This will target the SPECIFIC timeline object(s).
            jQuery('li div.vCard span.timeline', context).hover(hoverIn, hoverOut);
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
        <ul id="myList">
            <li>
                <div class="vCard">
                    by
                    <a class="owner" href="/users/aruna">Aruna </a>
                    <span class="timeline">
                        about 1 hours ago
                        <div class="type">
                            <a href="#">Student</a>
                            <div class="details">
                                <div>
                                    Employee ID:<label></label>
                                </div>
                                <div>
                                    Project Name:<label></label>
                                </div>
                                <div>
                                    Project Role:<label></label>
                                </div>
                                <div>
                                    Supervisor Name:<label></label>
                                </div>
                            </div>
                        </div>
                    </span>
                </div>
            </li>
            <li>
                <div class="vCard">
                    by
                    <a class="owner" href="/users/jasmine">Jasmine </a>
                    <span class="timeline">
                        about 2 days ago
                        <div class="type">
                            <a href="#">Professor</a>
                            <div class="details">
                                <div>
                                    Employee ID:<label></label>
                                </div>
                                <div>
                                    Project Name:<label></label>
                                </div>
                                <div>
                                    Project Role:<label></label>
                                </div>
                                <div>
                                    Supervisor Name:<label></label>
                                </div>
                            </div>
                        </div>
                    </span>
                </div>
            </li>
        </ul>
    </form>
</body>
</html>