4

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

问题参考

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;
}
4

1 回答 1

1

在设置弹出 div的and之前，您需要检查window.innerHeightandwindow.innerWidth属性。这是一个让你开始的小提琴。topleft

重要的部分在.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()需要两个函数，一个用于鼠标悬停，一个用于鼠标悬停。在鼠标移出时，我只是隐藏弹出窗口。在鼠标悬停时，我用内容填充弹出 div（这里来自项目的data-extra属性，但它可能来自任何地方）然后根据项目的位置和窗口边界决定将其放置在哪里。

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

更新

因此，简短的回答是让您的内容适合普通的浏览器窗口。我必须最大化我的浏览器才能看到该弹出窗口中的所有内容。这似乎也是重要的信息。所以也许它值得拥有自己的页面？这些是意见，而不是事实，所以我将继续阅读最新版本的小提琴，您可以在此处更轻松地查看它。

在 CSS、HTML 和 Javascript 中到处都需要进行更改，以使这项工作正常进行。可能最大的问题是visibility:hidden。可能有一种方法可以让 jQuery 使用它，但我只使用默认值display:none，即 what.show()和.hide()toggle。

新的 CSS

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

我需要ul用 id 的 div包裹你linkcat-4。现在为新的js。最有趣的变化是我意识到我们需要考虑 div 的填充。由于 padding 参数适用于所有边，我们实际上需要将 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);

让我知道这是否有效。

于 2013-03-02T07:09:35.897 回答