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
Robert Walker
17,146 PointsHover to show hidden div with jquery
<div id="sign-in">
<form id="username" action="">
<p>Enter a username</p>
<p id="username-error"></p>
<input id="u" autocomplete="off" /><button>Send</button>
</form>
</div>
<div id="hide-me">
<div class="image-upload">
<label for="imagefile">
<img src="placeholder.jpg"/>
</label>
<input id="imagefile" type="file">
</div>
<div id="flex-chat-box">
<div id="flex-chat-window">
<ul id="messages"></ul>
</div>
<div id="flex-options-box">
</div>
<div id="flex-chat-users">
<ul id="users"></ul>
</div>
<div id="flex-submit-box">
<form id="message-submit" action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
</div>
</div>
</div>
I append the below to the "users" ul:
<li id="user-list">' + data[i] +'<div id="user-options"><a href="">View Profile</a></div>
I was hoping to have the div show using jquery on hover but cant seem to get it working.
Is it because I have the div inside a li?
Ive tried a few different versions my last being these:
$('#flex-chat-users li').on({
'mouseenter':function(){
$('#user-options').show();
},'mouseleave':function(){
$('#user-options').hide();
}
});
$('#flex-chat-users li').hover(function(){
$('#user-options').show();
});
$('#users li').hover(function(){
$('#user-options').show();
});
etc...
Nothing I do seems to work, I am guessing I have missed something super easy but just cant see it.
3 Answers
Marcus Parsons
15,719 PointsTry something like this (change those IDs to classes since there are more than one!):
$('.user-list').hover(function () {
$(this).children(".user-options").show();
});
Once you change those over to classes (since there are obviously more than one of them), this should select the appropriate div and show it! ID's are only for ONE element, not for a lot of them! lol
Marcus Parsons
15,719 PointsHey Robert,
Unless you didn't post in the full code from your HTML page, it looks like you are calling the wrong ID. It should be #flex-chat-users not #flex-chat-user because you have #flex-chat-users in the HTML you posted.
Robert Walker
17,146 PointsSorry mistake when typing it out, not missed it in my actual code.
Ill correct my post now sorry.
Marcus Parsons
15,719 PointsHave you tried calling #users li? Because I just noticed that the li elements are going to the ul with id of #users.
Robert Walker
17,146 PointsI have indeed, I think that's in the above things ive tried.
Marcus Parsons
15,719 PointsAh, yea, I didn't see that lol Hmm how about just #user-list since that's the id of the li you're trying to click?
Robert Walker
17,146 PointsCould of sworn I tried that too but it actually did work thank you!
Sorry I mean just #users worked not #user-list, no idea why it had to be #users, thank you anyway as you made me try something again that I thought I had already done.
=) marked your answer as best, thanks again!
Marcus Parsons
15,719 PointsWell awesomesauce man!!! =D
Robert Walker
17,146 Points$('#users').hover(
function() {
$('#user-options').show();
}, function() {
$('#user-options').hide();
}
);
Robert Walker
17,146 PointsInfact no lol, that hasn't worked at all.
Now if I hover over any user only the first div will show, Ive got it totally wrong, so what I wanted isn't actually working still.
As you hover over a user I want their specific div to show div#user-options for that specific li.
Gahhhh!
Marcus Parsons
15,719 PointsCan you go to http://www.jsfiddle.net and just post your entire code? It's hard to get the big picture with only snippets of code lol.
Marcus Parsons
15,719 PointsThat code you posted is working perfectly. But, I'm assuming that you're adding multiple li's through some sort of loop. The problem is that you need to attach that event handler to each specific li. ID's are only for one specific element, not for multiple elements. So, attaching an ID to every single li you generate is not going to allow you to target the li you need. You can't use the selector for an ID because it's going to target any element with that ID.
I really can't help you any further without the FULL code.
Robert Walker
17,146 PointsThat code I pasted doesn't work for me in any browser at all, when I hover over it, it does nothing at all.
I get what you are saying now, so how would I go about doing this then. Above is the full code I am using.
Every time a user connects their name is added to the ul under a li with a div inside that with the user options, view profile, private chat, ignore etc.
That's pretty much the full code that I have posted, the fiddle is just removing everything from outside that isn't needed.
Marcus Parsons
15,719 PointsThe fiddle works fine. You probably don't have jQuery selected, though lol. Look on the left hand side and the very top select box that probably says "No-Library (Pure JS)" needs to say "jQuery x.x.x" where x's are the version number you want to use. Then click update and look at it.
Robert Walker
17,146 PointsNot what I mean, that code on in my local env wont work on any browser, I have jquery in there too as other things work perfectly.
Either way, I understand what you mean about selectors. So how am I meant to do this, I need the div for that user to appear when their name is hovered over.
Marcus Parsons
15,719 PointsAs I said, since you're not sharing your full code, I can't help you because you're obviously doing something else other than what's in that JSFiddle.
Robert Walker
17,146 PointsNo, the only other thing to happen is when a user leaves or joins they are added or removed from the ul #users.
<li id="user-list">' + data[i] +'<div id="user-options"><a href="">View Profile</a></div></li>
Like I posted above!
Marcus Parsons
15,719 PointsMarcus Parsons
15,719 PointsI ran this code with the JS fiddle and some extra list items with different data, and it worked as it should. The only div's that were revealed were those that I hovered over.