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?
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.
jquery is easiest option in this case
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.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.