Question

我正在为网站制作一个简单的导航菜单。您创建了一个ID为ul的{{1}}，并且应该非常简单。我有一些简单的CSS给所有menu s正确的背景图像，然后一些jQuery在用户鼠标悬停时改变li的外观。它工作得很好，但有一个问题。当用户直接点击链接时，而不是点击它周围的框，然后使用浏览器的后退按钮，就会出现问题。当用户将鼠标悬停在这个时间时，整个li都会变成空白，但是一旦用户将鼠标移开，它就会很好。有谁知道什么可能导致这种奇怪的行为？（注意，每隔一段时间，鼠标悬停导致li闪烁，特别是如果它是底部的两个li之一。我认为这是正常的，但也许它可能有助于诊断问题。）

li

Answer 1

你知道你可以用 CSS和HTML做你正在做的一切吗？

将a设置为display:block，使其填满li
在a上设置:hover状态以更改背景。
???
利润。

Answer 2

以下作品。我会把CSS细节留给你。另请注意，正如其他人所指出的那样，您可以使用纯CSS执行此操作并获得相同的结果。但由于这不是你要求的，我会尊重你的要求并给jQuery。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Default Web Project - www.SampsonResume.com</title>
    <style type="text/css">
      .ul {list-style:none;margin:0;padding:0;border:1px solid #CCCCCC;}
      li.link {background-color:#000000;padding:10px;}
        li a {color:#ffffff;text-decoration:none;}
      li.on {background-color:#f1f1f1;cursor:pointer;}
        li.on a {color:#000000;}
    </style>
    <script src='scripts/jquery/jquery-1.3.min.js' type='text/javascript'></script>
      <script type="text/javascript">
        $(document).ready(function(){
          $("li.link").each(function(){
            $(this).hover(
              function(){$(this).addClass("on");},
              function(){$(this).removeClass("on");}
            );
           $(this).click(function(){
             window.location = $(this).find("a").attr("href");
           });          
         });
       });
     </script>
  </head>
  <body>
    <ul>
      <li class="link"><a href="http://www.google.com">Google</a></li>
      <li class="link"><a href="http://www.yahoo.com">Yahoo</a></li>
      <li class="link"><a href="http://www.SampsonVideos.com">SampsonVideos</a></li>
    </ul>
  </body>
</html>

Answer 3

我知道这不是你问题的答案，但是在hovers时更改元素的CSS属性可以完全在CSS中完成。对于您的示例，您的CSS将类似于：

.link {
  background: url('./link.png');
}
.link:hover {
  background: url('file:///Users/J/Desktop/DHTML/Menu/linkselect.png');
}

~~我想想你也可以在<a>标签周围包裹<li>标签，这样整个列表项就是链接（不再需要$(".link").click(...)代码）。~~

糟糕，无法在<a>周围包裹<li>，但正如Oli所提到的，你可以在CSS中执行此操作：

.link a {
  display: block;
}

Answer 4

哦，好吧，我说我不会给CSS解决方案，但无论如何它在这里：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Default Web Project - www.SampsonResume.com</title>
    <style type="text/css">
      ul {list-style:none;margin:0;padding:0;border:1px solid #CCCCCC;}
      li {margin:0;padding:0;}
        li a {display:block;background-color:#FFF;color:#000;text-decoration:none;}
      li a:hover {color:#FFF;background-color:#000;}
    </style>
  </head>
  <body>

    <ul>
      <li><a href="http://www.google.com">Google</a></li>
      <li><a href="http://www.yahoo.com">Yahoo</a></li>
      <li><a href="http://www.SampsonVideos.com">SampsonVideos</a></li>
    </ul>

  </body>
</html>

为什么这个jQuery在我移动到另一个页面然后点击后退按钮后工作方式不同？

4 个答案: