Changing element style on sibling hover with CSS

I have the following structure:

<div id="e1">
  <div id="main">text text text text</div>
  <div id="footer">something</div>

And I want the <h1> to turn blue for example when the footer is hovered. I know I can do it with Javascript but I was wondering If you might know some CSS trick to do it without.



Your h1 comes before #footer, so it's not possible with pure CSS as it doesn't provide a selector to match the preceding sibling element.

It's really easy actually, I've implemented it in this

Just add the element with the hover event first if it is first in the structure, add the + operator and then add the element you want the hover to affect.

Like so


<div class="container"></div>
<h2>Some Title</h2>

.container:hover + h2{
   Do your own magic

#e1:hover {

#main, #footer{

Another option.

I've implemented it in a way, not changing html structure, and pure CSS.

see it in jsfiddle:

Need Your Help

How to vary the line color of a matlab plot (like colormap)?

matlab colors plot

I have a 2D space in which a function value is defined (you can think of it as a manifold). Now I plotted the function value using contourf and changed the colormap to something softer than jet. So...

Google authentication and authorization among their apps

security google-app-engine authentication oauth-2.0 restful-authentication

Google provides a bunch of apps like Plus, Gmail, Docs, Reader, etc. Internally, these apps can talk to each other securely somehow to query information/data. I am wondering conceptually how Google

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.