CSS: Hover one element, effect for multiple elements?

css xhtml hover

Marko · Sep 22, 2009 · Viewed 204k times · Source

I'm looking for a method for my hovering issue.

<div class="section">

<div class="image"><img src="myImage.jpg" /></div>

<div class="layer">Lorem Ipsum</div>

</div>

Now, both classes, image and layer, have borders. Both have different color for normal and hover. Is there way to make it, so if I hover layer class, both layer and image class hovering border color is active? And vise versa?

Answer

You don't need JavaScript for this.

Some CSS would do it. Here is an example:

<html>
  <style type="text/css">
    .section { background:#ccc; }
    .layer { background:#ddd; }
    .section:hover img { border:2px solid #333; }
    .section:hover .layer { border:2px solid #F90; }
  </style>
</head>
<body>
  <div class="section">
    <img src="myImage.jpg" />
    <div class="layer">Lorem Ipsum</div>
  </div>
</body>
</html>

CSS: Hover one element, effect for multiple elements?

Answer

Related questions