Changing element style on sibling hover with CSS

I have the following structure:

<div id="e1">
  <h1>Header</h1>
  <div id="main">text text text text</div>
  <div id="footer">something</div>
</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.

Thanks!

Answers


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 http://codepen.io/zyadsherif/pen/LIlhs

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

HTML:

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

CSS:
.container:hover + h2{
   Do your own magic
}

#e1:hover {
      color:red;
}

#main, #footer{
    color:black 
}

Another option.


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

see it in jsfiddle: http://jsfiddle.net/ijse/dhcqw/


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.