Search jQuery

jQuery Forum

Targeting child elements

in Using jQuery • 6 years ago

Hi, I'm very new to jquery and I want to use it to highlight the top-most element (parent) in my navigation list. For instance if i'm on a specific page, and I happen to hover over one of the child elements of the page I'm on I want to be able to change the background color of the parent element that i've just hovered over. Below is the code I currently have, but isn't working.

var urls = window.location.href;
var pages = urls.substr(urls.lastIndexOf('/')+1);
$('ul#nav a[href*="'+pages+'"]').children().hover(function(){
$(this).parents().css("background-color", "#FFFF33");
});

Replies(5)

jakecigar

Re: Targeting child elements

6 years ago

It's hard to follow without the HTML. Do you have children in your <a> ?

You probably want .parent(), not .parents()

JΛ̊KE

CORT0619

Re: Targeting child elements

6 years ago

Here is my html code for my menu:

<ul id="nav">
<li><a class="current-item" href="index">Home</a></li>
<li><a href="about" id="aboutUs" onmouseover="changeThisElementBlack(this.id)" onmouseout="changeThisElementWhite(this.id)">About Us</a>
<ul>
<li id="hours" onmouseover="changeParentBlack(this.id)" onmouseout="changeParentWhite(this.id)"><a style="width: 62px;" href="hours-rates">Hours</a></li>
<li id="rates" onmouseover="changeParentBlack(this.id)" onmouseout="changeParentWhite(this.id)"><a href="rates">Rates</a></li>
</ul>
</li>
<li><a href="#" id="services" onmouseover="changeThisElementBlack(this.id)" onmouseout="changeThisElementWhite(this.id)">Services</a>
<ul>
<li id="remoteServices" onmouseover="changeParentBlack(this.id)" onmouseout="changeParentWhite(this.id)"><a href="remote" style="border-bottom: none;">Remote Services</a></li>
</ul>
</li>
<li><a href="tips">Tips</a></li>
<li id="questions_link"><a id="contactUs" href="questions" onmouseover="changeThisElementBlack(this.id)" onmouseout="changeThisElementWhite(this.id)">Contact Us</a>
<ul>
<li id="servRequest" onmouseover="changeParentBlack(this.id)" onmouseout="changeParentWhite(this.id)"><a href="serviceReq">Request Service</a></li>
<li id="questionOrComms" onmouseover="changeParentBlack(this.id)" onmouseout="changeParentWhite(this.id)"><a href="questions">Questions or Comments</a></li>
</ul></li>
</ul>

jakecigar

Re: Targeting child elements

6 years ago

I would code my head like…

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Untitled</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script>
var urls = location.href;
var pages = urls.substr(urls.lastIndexOf('/') + 1);
$(function() {
$(".current-item").removeClass("current-item") // clean up
$('#nav li:has(a[href*="' + pages + '"])').addClass("current-item") //add the class to the li.
})
</script>
<style>
.current-item:hover{background-color:#FFFF33} /* do the hovering with CSS instead */
</style>
</head>

JΛ̊KE

CORT0619

Re: Targeting child elements

6 years ago

So, I was looking at the code and if I use css as above it just changes the background color when hovering over the element that has the current item class, but I was trying to make it so that when I hover over a child element of the element that has the current item class applied to it then the background color of the element that has the current-item class applied to it changes.

jakecigar

Re: Targeting child elements

6 years ago

Change the CSS.

This one yellows the the <a>

.current-item a:hover{background-color:#FFFF33}

This one highlights the current-item , but not the children

.current-item:hover>a{background-color:#FFFF33}

JΛ̊KE

Top Reply

Response title

Attachments

jQuery Forum

Targeting child elements

Replies(5)

Re: Targeting child elements

Re: Targeting child elements

Re: Targeting child elements

Re: Targeting child elements

Re: Targeting child elements

Statistics

Tags

Actions