开发者

Is it possible with jquery to use the nth-child() selector on an 'a' or an 'a:hover', not just 'li'?

开发者 https://www.devze.com 2023-01-23 05:57 出处:网络
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 elem

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.

0

精彩评论

暂无评论...
验证码 换一张
取 消