jquery 是否可以在“a”上使用 nth-child() 选择器？或者“a:hover”，而不仅仅是“li”？
我创建了一个导航栏，其中每个链接的悬停状态都有不同的颜色，因此我尝试使用 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/
干杯！ 保罗
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');
});
Hi 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
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您无法使用
:hover等 CSS 伪选择器进行选择，但是您可以选择元素。:nth-child是否合适取决于您的标记。我假设每个都是您选择的元素的子元素。如果是这种情况，那么您只需将
a添加到选择器即可。这使用
>子选择器，基本上是说我想要元素是元素的直接子元素，而leftbar的后代。You can't select using a CSS pseudo selector like
:hover, but yes, you can select an<a>element.Whether
:nth-childis 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
ato the selector.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 ofleftbar.