Question

我已经创建了一个导航栏，其中每个链接的悬停状态都是不同的颜色，因此我尝试使用jquerys nth-child（）选择器选择a：hover状态。我可以让它选择li元素而不是a或a：hover。目前所有的悬停都是蓝色的。

这是我试图使用的jquery代码：

jQuery(document).ready(function() {        
jQuery('#leftbar li:nth-child(3)').css('border-bottom', '#000000 5px solid');
});

你好用PHP生成导航，这里是：

<ul id="leftbar">
<?php
$pagepath = "content/pages/";
$legalpath = "content/legals/";

$mainnavpath = "content/.system-use/navigation/";
$mainnavfile =  $mainnavpath."mainnav.inc";
if (file_exists($mainnavfile)) {
require $mainnavfile;


sort ($mainfiles);


for($i=0; $i<count($mainfiles); $i++)
{
if (!preg_match("/XX-/",$mainfiles[$i])) {
$displayname = preg_replace("/\.inc/i", "", $mainfiles[$i]);
$displayname = substr($displayname, 3);
echo "<li>";

echo "<a ";
if ($page==$displayname) {echo ' class="active"';} else {echo ' class="prinav"';}


echo "title='$displayname' href='";
if ($useredirect=="yes"){echo '/'.$displayname.'/';} else {echo  '/index.php?page='.$displayname;}
echo"' ";
echo "><span>$displayname</span></a></li>\n";

}}
}

else { echo "<strong>No Navigation - Please Login to your Admin System and set the Page Order</strong>"; }
?>

这是我正在努力的网站： http://entourageuk.com/

干杯！保罗

Answer 1

您不能使用像:hover这样的CSS伪选择器进行选择，但是，您可以选择<a>元素。

:nth-child是否合适取决于您的标记。我将假设每个<a>都是您选择的<li>元素的子项。

如果是这种情况，那么您只需将a添加到选择器。

jQuery('#leftbar li:nth-child(3) > a').css(...

这使用the > child selector，基本上是说我希望<a>元素是<li>元素的直接子元素，它是第三个子元素。它的容器，是leftbar的后代。

是否可以使用jquery在'a'或'a：hover'上使用nth-child（）选择器，而不仅仅是'li'？

1 个答案: