Question

这是我的HTML：

<ul id="navigationMenu">
<li>
    <a class="home" href="#">
        <span> i need to prevent loading this content</span>
    </a>
</li>

<li>
    <a class="about" href="#">
        <span><img src="http://webdesigntunes.com/wp-content/uploads/2013/05/Minimalistic-Navigation-Menu.jpg" /> </span>
    </a>
</li>

<li>
     <a class="services" href="#">
        <span>Services</span>
     </a>
</li>

<li>
    <a class="portfolio" href="#">
        <span>Portfolio</span>
    </a>
</li>

<li>
    <a class="contact" href="#">
        <span>Contact us</span>
    </a>
</li>

抱歉，我无法输入CSS！

但我隐藏了li with overflow：hidden和当悬停溢出时：可见

我需要阻止浏览器加载隐藏的li内容，直到访问者通过悬停在另一个div上显示“li”

Answer 1

<li id="list">
  <a class="about" href="#">
    <span><img src="http://webdesigntunes.com/wp-content/uploads/2013/05/Sweet-Tabbed.jpg"   /> </span>
  </a>
</li>


$(document).ready(function()
{
   $('#list').hide();

   $('#yourdiv').hover(function()
   {
     $('#list').show();
   },

  function()
  {
    //in case you want to hide it again on mouseout else leave this function empty
    $('#list').hide();  
  }
  );

});

Answer 2

为li元素分配ID。
，将“display：none”指定给此ID。
在另一个div上，为showElement添加一个onHover触发器。
添加以下javascript：

function showElement（） { document.getElementById（“li element id”）。style.display =“block”; }

防止加载隐藏div的内容

2 个答案: