0

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?

4
Contributors
3
Replies
4
Views
5 Years
Discussion Span
Last Post by bhartman21
2

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.

1

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.

Votes + Comments
thanks
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.