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

CSS

Nick Brooks
Nick Brooks
10,072 Points
Posted by Nick Brooks
Nick Brooks
10,072 Points

:hover problems.

I currently have an image with a little caption on top of it in the form of a <p> tag, the p tag is a hyperlink that will lead to another page.

An animation happens when you hover over the <p>, however I want the same animation to occur when I hover over the image as well (not to animate the image, but to activate the <p> tag animation when hovering over the image).

How would I go about doing this? Sorry if this is poorly explained, I am finding it difficult to put it into words.

2 Answers

Steven Parker
Steven Parker
229,644 Points
Steven Parker
Steven Parker
229,644 Points

This is a bit of a guess.

But it sounds like you might be able to combine the paragraph and image together in a containing <div> element. Then you could trigger the animation based on a hover of the div. Is the animation done in CSS or JavaScript? If CSS, you could use a selector like: "div:hover p". For JavaScript, just attach the event handler to the div but animate the paragraph.

For the most complete and accurate answers, always show your code with your question.

Patrick Vanegas
Patrick Vanegas
6,971 Points
Patrick Vanegas
Patrick Vanegas
6,971 Points

You could insert an identifier inside the <p> tag in order to do this. Just place <p id="create-link"><a href="some-place">blah blah blah</a></p>, and in your css, select the proper "a" selector using #create-link a:hover { color: whatever; }

You can do it in a more general way by selecting all <p>'s by selecting:

p a:hover { color: whatever; }

However, the first option will be more specific and only make that paragraph element hover since you are only targeting a selector with a specific id.

Hope this helps, Nick!

Steven Parker
Steven Parker
229,644 Points
Steven Parker
Steven Parker
229,644 Points

He says he wants to trigger animation when you hover over a sibling image (img) element. It doesn't seem like adding links inside the paragraph would accomplish that.