954,604 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Have something to say? Contribute New Article Reply to this Article

Change other elements on hover..

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?

reco21
Light Poster
33 posts since Jan 2011
Reputation Points: 10
Solved Threads: 1
 

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 class="title" >The Title</h1>


In your CSS,

.title:hover { color: BLUE; }


I hope this helps you.

rotten69
Posting Whiz
346 posts since May 2011
Reputation Points: 3
Solved Threads: 16
 

jquery is easiest option in this case

learner guy
Light Poster
26 posts since Aug 2011
Reputation Points: 10
Solved Threads: 0
 

Use something like this... onmouseover="doHoverClass()" onmouseout="setNormalClass()" in the 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.

bhartman21
Light Poster
39 posts since May 2010
Reputation Points: 12
Solved Threads: 7
 

This article has been dead for over three months

Post: Markdown Syntax: Formatting Help
You
View similar articles that have also been tagged: