Change other elements on hover..

[reco21]

I was wondering,

I want to change other elements that are inside of a main div when one hovers.

<div id="post">
 <h1>The Title</h1>
 <p class="text">Text</p>
 <p class="other-text">Text</p>
</div>

So if one hovers over the "post" div then the the "#post h1" title would change from black to blue.. If it's css3 that's fine for me because it's a visual feature that isn't needed.

Is this better suited for jquery or something?

[rotten69]

I think a simple Javascript code will get you a solution that you want. Hint: give it an id and use getElementById in Javascript if you want to solve the problem by using Javascript.

Well, since the task's is a piece of cake, You can also achieve what you want in CSS 1,2 or 3.

<h1 [U]class="title"[/U] >The Title</h1>

In your CSS,

.title:hover { color: BLUE; }

I hope this helps you.

[learner guy]

jquery is easiest option in this case

[bhartman21]

Use something like this... onmouseover="doHoverClass()" onmouseout="setNormalClass()" in the <div id="post" class="normalClass"> tag. Then set up a .normal and a .hover classes for your tags and change the class when the javascript is fired. I would avoid jquery if you only want to use if for this. In my opinion, it would be a lot of overhead just to swap the classes via javascript.