Question

您好我正在使用wordpress创建一个网站，我使用javascript来显示描述div在悬停元素列表但我的问题是根据屏幕大小描述div必须改变其位置才能完全显示内容我不确定我是否清楚地表达了我的疑问，任何人都可以建议我怎样才能得到这个。

Reference for the question

jQuery的：

(function($) {
  $(document).ready( function() {

    $('#linkcat-4 .xoxo li:nth-child(1)').mouseover(function(e) {
      $('#text1').css(
                       'visibility' , 'visible'
                      );
      $('#linkcat-4 .xoxo li:nth-child(1)').mouseout(function(e) {
        $('#text1').css(
                        'visibility' , 'hidden'
                       );
      });

    });
  });
})(jQuery);

HTML：

<ul class="xoxo blogroll">
<li><a href="">Admirality</a></li>
<li><a href="">Banking</a></li>
<li><a href="">Commercial</a></li>
<li><a href="">Contract</a></li>
<li><a href="">test</a></li>
<li><a href="">Corporate</a></li>
</ul>

<div  class="desc-text" id="text1" style="visibility: hidden;">
  <p>We represent protection and indemnity clubs that provide insurance 
     for many of the ships coming to Guyana. We deal with all the familiar 
     problems encountered by ships, both contentious and non-contentious, 
     including arrests arising from accidents and claims for wages and damaged 
     cargo. We advise masters, obtain surveys, note protests, negotiate 
     settlements and advise on or deal with stowaways and medical emergencies. 
     Our admiralty practice is the largest in Guyana.
  </p>
</div>

CSS：

.desc-text {
  position: absolute;
  top: 12%;
  left: 50%;
}

#text1 {
  visibility:hidden;
  background:#f1f1f1;
  padding: 15px;
  width: 150px;
}

Answer 1

在设置弹出式div的window.innerHeight和window.innerWidth之前，您需要先检查top和left属性。 Here is a fiddle to get you started

重要的部分在.hover()电话中：

$( function() {
    pop = $("#popup");
    $(".item").hover( function() {
          row = $(this);
           pop.html(row.data("extra"))
            .css("top", (function(r) {
               if(r.offset().top > window.innerHeight - pop.height())
                   return window.innerHeight - pop.height();
               else
                  return r.offset().top;
              })(row))
            .css("left", (function(r) {
               if(r.offset().left + r.width() > window.innerWidth - pop.width())
                   return window.innerWidth - pop.width();
               else
                   return r.offset().left + r.width();
               })(row))
            .show();

    }, function() {
       pop.hide();
    });
});

基本上，.hover()有两个函数，一个用于鼠标悬停，一个用于mouseout。在mouseout上，我只是隐藏弹出窗口。在鼠标悬停时，我用内容填充弹出div（这里来自项目的data-extra属性，但它可以来自任何地方）然后根据项目的位置和窗口边界决定放置它的位置。

希望有所帮助。如果您需要更多，请发表评论。

更新

因此，简短的回答是让您的内容适合普通的浏览器窗口。我必须最大化我的浏览器才能看到弹出窗口中的所有内容。它似乎也是重要的信息。也许它值得拥有自己的页面？这些是意见，而不是事实，所以我将继续latest version of the fiddle you can more easily look at here。

为了实现这一目标，在CSS，HTML和Javascript中随处可见。可能最大的问题是visibility:hidden。可能有一种方法可以让jQuery使用它，但我只使用默认的display:none，即.show()和.hide()切换。

新css

#text1
{
  display:none;
  background:#f1f1f1;
  padding: 15px;
  width: 150px;
}

我需要用{div} ul包裹你的linkcat-4。现在为新的js。最有趣的变化是我意识到我们需要考虑div的填充。由于padding参数适用于所有边，我们实际上需要将填充加倍并将其添加到窗口边界的偏移量中：

新javascript

(function($) {
   $(document).ready( function() {
     var pop = $("#text1");
     $('#linkcat-4 .xoxo li:nth-child(1)').hover(function(e) {
          var row = $(this);
          pop.html(row.data("extra"))
          .css("top", (function(r) {
            if(r.offset().top > window.innerHeight - pop.height())
               return window.innerHeight - pop.height() - parseInt(pop.css("padding"))*2;
            else
               return r.offset().top;
          })(row))
          .css("left", (function(r) {
            if(r.offset().left + r.width() > window.innerWidth - pop.width())
               return window.innerWidth - pop.width() - parseInt(pop.css("padding"))*2;
            else
               return r.offset().left + r.width();
          })(row))
          .show();                          
       },

       function(e) {
          pop.hide();
       });
   });
})(jQuery);

如果有效，请告诉我。

如何在悬停时动态显示div的位置

1 个答案:

更新

新css

新javascript