CSS: Hover one element, effect for multiple elements?

Question

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?

Community · Accepted Answer · 2015-12-20 16:28:43Z

215

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>

edited Dec 20, 2015 at 16:28

CommunityBot

11 silver badge

answered Sep 22, 2009 at 20:58

corymathews

12.6k14 gold badges60 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Marko Over a year ago

Okey, here's winner!! :) I didn't know that if i have something:hover, I can continue that whit another element! (somthing:hover .second).. Everyday you learn something new.. Thanks x10

Bikash Gyawali Over a year ago

What if the two divs (the one to hover over and the one to show) are not within the same immediate parent div?

corymathews Over a year ago

you can go up the structure as far as you need to go, or you could add an item to be the parent of both. Sometimes though, if they have nothing in common you would have to resort to javascript.

Cos Over a year ago

How would I go about changing one child element of a div when hovering another child element of the same div?

yanike Over a year ago

Thanks! I was using javascript and this CSS worked out better. Sometimes it's easier than we think.

|

Steve Wortham · Accepted Answer · 2009-09-22 20:59:14Z

11

This worked for me in Firefox and Chrome and IE8...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
    <head>
        <style type="text/css">
        div.section:hover div.image, div.section:hover div.layer {
            border: solid 1px red;
        }
        </style>
    </head>
    <body>
        <div class="section">
            <div class="image"><img src="myImage.jpg" /></div>
            <div class="layer">Lorem Ipsum</div>
        </div>
    </body>
</html>

... you may want to test this with IE6 as well (I'm not sure if it'll work there).

edited Sep 22, 2009 at 20:59

answered Sep 22, 2009 at 20:38

Steve Wortham

22.3k5 gold badges72 silver badges91 bronze badges

1 Comment

Steve Wortham Over a year ago

Actually it can work in IE8, it seems. Adding the Doctype made the difference. So there -- a pure CSS solution. ;)

Viliam · Accepted Answer · 2009-09-22 21:03:46Z

10

I think the best option for you is to enclose both divs by another div. Then you can make it by CSS in the following way:

<html>
<head>
<style>
  div.both:hover .image { border: 1px solid blue }
  div.both:hover .layer { border: 1px solid blue }
</style>
</head>

<body>
<div class="section">

<div class="both">
  <div class="image"><img src="myImage.jpg" /></div>
  <div class="layer">Lorem Ipsum</div>
</div>

</div>
</body>
</html>

answered Sep 22, 2009 at 21:03

Viliam

4,4343 gold badges30 silver badges30 bronze badges

Comments

eykanal · Accepted Answer · 2009-09-22 20:30:32Z

7

This is not difficult to achieve, but you need to use the javascript onmouseover function. Pseudoscript:

<div class="section ">

<div class="image"><img src="myImage.jpg" onmouseover=".layer {border: 1px solid black;} .image {border: 1px solid black;}" /></div>

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

</div>

Use your own colors. You can also reference javascript functions in the mouseover command.

answered Sep 22, 2009 at 20:30

eykanal

27.2k19 gold badges86 silver badges114 bronze badges

2 Comments

DVK Over a year ago

+1 for using class CSS change instead of element one as another example.

Marko Over a year ago

This is working too, thanks! I just try to avoid inline coding as much I can.. ;)

NightOwl888 · Accepted Answer · 2018-03-10 00:58:16Z

2

You'd need to use JavaScript to accomplish this, I think.

jQuery:

$(function(){
   $("#innerContainer").hover(
        function(){
            $("#innerContainer").css('border-color','#FFF');
            $("#outerContainer").css('border-color','#FFF');
        },
        function(){
            $("#innerContainer").css('border-color','#000');
            $("#outerContainer").css('border-color','#000');
        }
    );
});

Adjust the values and element id's accordingly :)

edited Mar 10, 2018 at 0:58

NightOwl888

57.1k28 gold badges148 silver badges222 bronze badges

answered Sep 22, 2009 at 20:26

brettkelly

28.3k8 gold badges58 silver badges73 bronze badges

1 Comment

Marko Over a year ago

Nice, really nice! What about if I have multiple section for same class names? Now I've tryed that for four whit same class names and when I hover one, those all changes?? Should I make running number front of all sections? Does jquery have wildcard support anykind? (okey, I try just google for it! ;)) Thanks..

Muhammad Muddassar · Accepted Answer · 2021-06-13 14:14:00Z

1

You can also do it like this. for example you have a link attached to another link and you want to show both at hovering at one you can do it simply by specifying each individual's functions then at once at hovering both.

.videoTitle:hover{
     color: #1270cf;
} 
.videoTitle:hover .copy{
     display: block;
}

answered Jun 13, 2021 at 14:14

Muhammad Muddassar

5951 gold badge5 silver badges21 bronze badges

Comments

Igor Ivancha · Accepted Answer · 2016-02-18 10:31:36Z

0

OR

.section:hover > div {
  background-color: #0CF;
}

NOTE Parent element state can only affect a child's element state so you can use:

.image:hover + .layer {
  background-color: #0CF;
}
.image:hover {
  background-color: #0CF;
}

but you can not use

.layer:hover + .image {
  background-color: #0CF;
}

edited Feb 18, 2016 at 10:31

Igor Ivancha

3,4614 gold badges32 silver badges39 bronze badges

answered Sep 9, 2013 at 11:45

Jnr

1,6902 gold badges25 silver badges41 bronze badges

Collectives™ on Stack Overflow

CSS: Hover one element, effect for multiple elements?

7 Answers 7

7 Comments

1 Comment

Comments

2 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

7 Comments

1 Comment

Comments

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related