个人中心
gpt4 book ai didi

jquery - jQuery 中的淡出

转载 作者：行者123 更新时间：2023-12-01 06:07:21 27 4
gpt4 key购买 nike

我正在尝试添加一个 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是

我写的是这样的

   jQuery(document).ready(function(){
      var _selectedLinkEl = null;
      var _detailEl = null;
      var body = jQuery("body");
      var elem=null;
jQuery(".user-link").mouseover(function(event) {
    _selectedLinkEl = this;
    _detailEl=jQuery(event.target).parent().next();
   //_detailEl.show();
  _detailEl.fadeIn("slow");
  elem=jQuery(this).parent().next();
 _href=jQuery(this).attr('href').split("/")[2];

jQuery.post('/users/user_detail/?name='+_href,
     function(data){
    //elem.html(data).show();
            elem.html(data).fadeIn("slow");
     });//post

 body.mouseover(_bodyMouseOverFunction);
  }); // user-link

var _bodyMouseOverFunction = function(event) {
        if(event.target != _selectedLinkEl &&      
           event.target != _detailEl &&
           jQuery.inArray(_detailEl, jQuery(event.target).parent() ) == -1) {

      //_detailEl.hide();
    _detailEl.fadeOut("slow");
     body.unbind("mouseover", _bodyMouseOverFunction);
   }
 };// mouseover

});

上面的 jquery 更新了 image-hover div 并通过 fadeIn 显示 div，但它始终淡出。

只有当我的鼠标悬停在 div(image_hover) 或任何主体元素之外时，我才会尝试淡出 DIV image_hover 。

在这种情况下，如果我的鼠标位于链接上、div 上或 div 内的任何元素上 (image_hover)，则 Div 不应淡出。

请对此提出建议/。

如何做到这一点？

最佳答案

您的 HTML 是问题的一部分。为了解决这个问题，需要保持开放的区域必须位于您的触发器标签内，但我还注意到其他事情:

  • 默认情况下，包含“image_hover”的 DIV 是隐藏的(因此无论如何都不起作用)。
  • 您的 HTML 中没有可用作图像悬停的图像标记(看起来很奇怪)。
  • 您在 2 个截然不同的对象(顶部 DIV 和“大约 1 天前”SPAN)中使用“时间轴”CSS 类...只有 1 个似乎是时间轴。
  • 您有 2 个链接(例如 anchor )暗示可能用作切换:“显示其他详细信息”和“查看”(是哪个？)
  • 每个链接切换都位于要切换的链接内。
  • 您的 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>

关于jquery - jQuery 中的淡出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4333713/

27 4 0
文章推荐： Python:如何导入位于不同目录中的函数？
文章推荐： asynchronous - 在回流中排队异步操作
文章推荐： java - 如何使用 ResourceBundle 从属性文件中读取文本而不是键
文章推荐： angularjs - 如何在 Angular Yeoman 模板 dist 中使用 ng-include？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com