Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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
221,323 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

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
221,323 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.