使用 jquery 和 php 的动态导航栏（带图像）-鼠标悬停效果的问题

Question

我正在构建一个由 PHP 控制的动态导航栏，并且我在列表中使用图像。我正在应用 jQuery 来实现“悬停”效果。这是 PHP 代码：

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

在我的导航列表中，我使用 PHP 'if' 语句根据 $page 的返回值设置 'display:none' 和 'display:inline' 。查看代码：

<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”是否显示“内联”或“无”，并从那里定制我的 jQuery，但我一生都不知道该怎么做，我不是世界上最伟大的javascript/jQuery 编码器。有没有办法检查某个元素是否应用了特定的 CSS 属性，我用谷歌搜索并摆弄了我的代码几个小时，但无济于事。

预先感谢大家。

PS 我在 PHP if 语句中的导航栏中添加了 CSS !important ，但由于某些奇怪的原因，这仅在 Chrome 中有效，所有其他浏览器都忽略此规则。

Answer 1

使用 jQuery，您可以检查如下属性值：

...您的代码...

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

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

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

无需摆弄“显示”，它已经内置于 中隐藏（）/显示（）。您也不应该使用它：

style='display:inline !important'"

默认情况下，显示已经是block或inline，因此除非您使用“display:none”，否则通常可以将它们排除在外。

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

内联样式也会覆盖样式表 CSS，所以你永远不需要使用 >！重要。

关于样式菜单的一个提示是，设计 A 标签，而不是 LI。将事件放在 A 标签上，而不是 LI 上。

如果您想了解如何正确设置菜单样式，请参阅我的教程：
我喜欢列表。

Answer 2

“所以我需要一种方法来检查鼠标悬停时“darkNav”是否显示“内联”或“无”......”

这是未经测试的，但您可以尝试类似的方法...

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

但是，您可能想尝试 addClass() 和 removeClass () 而不是更改和/或使用内联 CSS。

Answer 3

是的..我第二点是使用 addClass()l 和 removeClass() 会加载得更好...一些代码

if($(this).hasClass('visible') {
  // do something
}
else {
  // do something else
}

看起来更好、专业且可读...但只是我说...