动态导航栏(图片)与jquery和鼠标悬停效果的问题

Dynamic Navigation bar (with images) with jquery and problems with mouseover effects

本文关键字：悬停 鼠标 问题 jquery 导航 图片 动态      更新时间：2023-09-26

我正在构建一个由PHP控制的动态导航栏，并且我在列表中使用图像。我正在为'hover'效果应用jQuery。这是PHP代码:

$path = $_SERVER['PHP_SELF'];
$page = basename($path);
$page = basename($path, '.php');

在我的导航列表中，我正在设置'display:none'和'display:inline'取决于使用PHP 'if'语句的$page的返回值。看到代码:

<ul id="cssdropdown">
  <li class="headlink">
  <a class="lightNav" href="index.php"  <?php if($page == 'index'){echo "style='display:none !important'";}else{echo "style='display:inline'";}?>><img src="images/navButtons/home.png" /></a>
  <a class="darkNav" href="index.php" <?php if($page == 'index'){echo "style='display:inline !important'";}else{echo "style='display:none'";}?>><img src="images/navButtons/home-dark.png" /></a>
  </li>....

这一切都很好，导航栏图像的显示取决于用户所处的页面。但我的问题是，现在我正试图整合jQuery，以获得一个不错的"鼠标悬停/悬停"的效果。参见jQuery代码:

$("li.headlink").hover(function(){
  $(this).find("a.lightNav").css("display", "none");
  $(this).find("a.darkNav").css("display", "inline");
},function(){
  $(this).find("a.lightNav").css("display", "inline");
  $(this).find("a.darkNav").css("display", "none");
});

但这引起了问题。当用户将光标移动到当前页面导航栏中的图像(即"暗"图像)上时，它会删除PHP设置的显示属性(显然)。

所以我需要一种方法来检查鼠标是否'darkNav'有显示'inline'或'none'，并从那里定制我的jQuery，但对于我的生活，我不知道该怎么做，我不是世界上最伟大的javascript/jQuery编码器。是否有一种方法来检查一个元素是否有一个特定的CSS属性应用到它，我谷歌和摆弄我的代码几个小时，但无济于事。

提前感谢大家。

注:我在PHP if语句的导航栏中添加了CSS !important，但由于一些奇怪的原因，这只在Chrome中工作，所有其他浏览器都忽略了这条规则

使用jQuery，您可以像这样检查属性值:

…你的代码…

  alert($(this).find("a.lightNav").css("display"))

至于使用jQuery隐藏/显示元素，只需使用:

  $(this).find("a.lightNav").hide()
  $(this).find("a.darkNav").show()

不需要摆弄"显示"，它已经内置在hide()/show()中。你也不应该使用这个:

style='display:inline !important'"

默认情况下，显示已经是block或inline，所以除非你使用"display:none"，否则你通常可以忽略这些。

如果你有一个左浮动菜单，你应该使用float:left，而不是display:inline

内联样式也覆盖样式表CSS，所以你应该永远不需要使用!important。

关于样式菜单的一个提示，样式是a标记，而不是LI。把事件放在A标签上，而不是放在i标签上。

如果你想学习如何正确的样式菜单，看看我的教程:我喜欢列表

"所以我需要一种方法来检查鼠标悬停'darkNav'是否显示'inline'或'none'. "

这是未经测试的，但你可以尝试像…


   if ($(this).attr('style') == "display:none") {
     // do something
   }
   else if ($(this).attr('style') == "display:inline") {
     // do something
   }

然而，你可能想尝试addClass()和removeClass()，而不是改变和/或使用内联CSS。

我第二，使用addClass()l和removeClass()将是更好的加载…像

这样的代码
if($(this).hasClass('visible') {
  // do something
}
else {
  // do something else
}

看起来更好、更专业、更可读…我只是想说。

相关文章：