Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Arshdeep Singh
PLUS
Arshdeep Singh
Courses Plus Student 8,349 Points
Posted by Arshdeep Singh
Arshdeep Singh
Courses Plus Student 8,349 Points

How to properly select elements with jQuery. I am trying to bring certain text when hovering over a div.

The problem is when I hover over one div the second one also gets selected and shows the text. But I want them to individually show the text. I can do that with jQuery but I dont know a smarted way to do it. Please help with the code. Below is the html & java script.

            <div class="row unis">

                <div class="col-md-6 uni-one" id="west">

                    <p class="uni-name">University of Westminster</p>
                    <a href=""><img class="img-responsive" src="img/uwbg3.png" alt=""></a>

                </div>

                <div class="col-md-6  uni-two" id="card">

                    <p class="uni-name">University of Westminster</p>
                    <a href=""><img class="img-responsive" src="img/cmubg3.png" alt=""></a>

                </div>

            </div>

$(document).ready(function() {

        $(".uni-name").hide();
        $("#west , #card").mouseover(function() {
            $(".uni-name").show();
        });

        $("#west , #card").mouseleave(function() {
            $(".uni-name").hide();
        });

    });
Chyno Deluxe
Chyno Deluxe
16,936 Points

//Fixed Code Presentation

How to post Code

2 Answers

Troy Riggs
Troy Riggs
13,859 Points

Using the comma separator means to select either of two selectors. Separating selectors with a space means that the first is the parent of the second.

If I understand what you want to do correctly, you want to mouseover #west and have #west .uni-name show. Then when you leave #west, hide #west .uni-name.

For the above behavior, this is a case when you can also use method chaining. This allows you to attach mouseover and mouseleave to one selector:

$(".uni-name").hide();  
$("#west").mouseover(function() {  
    $("#west .uni-name").show();  
}).mouseleave(function() {  
    $("#west .uni-name").hide();  
});

To have the same behavior on #card .uni-name, just switch the names a little.

$("#card").mouseover(function() {  
    $("#card .uni-name").show();  
}).mouseleave(function() {  
    $("#card .uni-name").hide();  
});

Hope this helps.

Arshdeep Singh
Arshdeep Singh
Courses Plus Student 8,349 Points
Arshdeep Singh
Arshdeep Singh
Courses Plus Student 8,349 Points

Thankyou Troy. This has clarified my doubts with space and comma in selectors and the code works perfectly. This approach I could have taken, writing the code for each div. However my concern is what if there are 100 images and we need to mouse over them individually and. Is there a smarter, more condensed code that we could write.

Chyno Deluxe
Chyno Deluxe
16,936 Points

//Fixed Code Presentation

Greg Kaleka
Greg Kaleka
39,021 Points
Greg Kaleka
Greg Kaleka
39,021 Points

Chyno Deluxe, I vote for a max of once per page on that thing :). It's helpful, but distracting. I usually just post a text snippet like this:

```javascript

[your code here]

```

You have to use back slashes to escape the back tics.

Chyno Deluxe
Chyno Deluxe
16,936 Points

Greg Kaleka , Got it.

Dale Bailey
Dale Bailey
20,269 Points
Dale Bailey
Dale Bailey
20,269 Points

Hey, its because they both have the class called uni-name so it makes them both appear. you could handle this a couple of ways.

Be more specific when selecting the class in jQuery like

$(".uni-one .uni-name").hide();
$(".uni-two .uni-name").hide();

Instead of hiding, you could apply and remove a class with toggle that would have a display: block; whilst the uni-name would have display: none;