Ive created a navigation bar where the hover state of each link has be a different color so im trying to select the a:hover states with jquerys nth-child() selector. i can get it to select the li element but not the a or the a:hover. Currently all the hovers are blue.
here is the jquery code im trying to use:
jQuery(document).ready(function() {
jQuery('#leftbar li:nth-child(3)').css('border-bottom', '#000000 5px solid');
});
H开发者_运维问答i the navigation is generated with php, here it is:
<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>"; }
?>
here is the site im working on: http://entourageuk.com/
Cheers! Paul
You can't select using a CSS pseudo selector like :hover
, but yes, you can select an <a>
element.
Whether :nth-child
is appropriate depends on your markup. I'm going to assume that each <a>
is a child of the <li>
elements you're selecting.
If that's the case, then you would just add a
to the selector.
jQuery('#leftbar li:nth-child(3) > a').css(...
This uses the >
child selector, and is basically saying that I want the <a>
element(s) that is a direct child of the <li>
element(s) that is the third child of its container and is a descendant of leftbar
.
精彩评论