How to change one element while hovering over another with CSS

Question

I have looked at several other questions but I can't seem to figure any of them out, so here is my problem: I would like to have a div or a span, when you hover over it an area would appear and would be like a drop down.

Such as I have an div, and I want to hover over it and have it show some info about the item I hovered over

<html>
<head>
<title>Question1</title>
<styles type="css/text">

  #cheetah {
      background-color: red;
      color: yellow;
      text-align: center;
  }

  a {
      color: blue;
  }

  #hidden {
      background-color: black;
   }

   a:hover > #hidden {
      background-color: orange;
      color: orange;
  }
</styles>

</head>
<body>
  <div id="cheetah">
     <p><a href="#">Cheetah</a></p>
  </div>
  <div id="hidden">
     <p>A cheetah is a land mammal that can run up 2 60mph!!!</p>
  </div>
</body>
</html>

But this ^ doesn't seem to work, I don't know why... and if there is a way to do that in CSS, I would like to know, but I want any and all suggestions.

See my comments at the bottom of the question. There is also a fiddle there. If the option of chnaging your html structure is a option - stackoverflow.com/questions/6669147/… — Jawad
– Jawad, Commented Dec 23, 2011 at 10:00

ptriek · Accepted Answer · 2011-12-23 09:52:49Z

37

You can achieve this in CSS only if the hidden div is a child of the element you use for hovering:

http://jsfiddle.net/LgKkU/

answered Dec 23, 2011 at 9:52

ptriek

9,2965 gold badges34 silver badges29 bronze badges

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

Comments

OverZealous · Accepted Answer · 2011-12-23 10:49:19Z

17

You cannot affect a non-child element using :hover from within CSS2, which is supported by all common browsers.

You can affect a sibling element using CSS2.1 selectors, like so:

a:hover + .sibling { ... }

However, this only works for direct siblings. This means you could have HTML like this:

<p><a href="#">Cheetah</a> <span class="sibling">Blah Blah Blah</span></p>

Notice that the a and the span are direct siblings.

Here's a fiddle showing the siblings working: http://jsfiddle.net/vUUxp/

However, not all browsers support the CSS2.1 sibling selectors, so you need to decide based on your target audience if you can use this or not.

Edit: Corrected my mistake on the CSS version for the + selector: it's 2.1 that defines it, not CSS3. I also added a link showing browser support. Otherwise, the answer is the same.

edited Dec 23, 2011 at 10:49

answered Dec 23, 2011 at 9:55

OverZealous

39.6k15 gold badges100 silver badges101 bronze badges

1 Comment

spelufo Over a year ago

There are also general sibling selectors, but they also work only for subsequent elements

Purag · Accepted Answer · 2011-12-23 09:56:51Z

9

Or, if you're open to it, use jQuery.

Something like this would work:

$("#element") // select your element (supports CSS selectors)
    .hover(function(){ // trigger the mouseover event
        $("#otherElement") // select the element to show (can be anywhere)
            .show(); // show the element
    }, function(){ // trigger the mouseout event
        $("#otherElement") // select the same element
            .hide(); // hide it
    });

And remember to wrap this in a DOM ready function ($(function(){...}); or $(document).ready(function(){...});).

answered Dec 23, 2011 at 9:56

Purag

17.1k4 gold badges57 silver badges78 bronze badges

Comments

brandonscript · Accepted Answer · 2018-11-06 00:17:44Z

5

You can absolutely do this in CSS3 now using the ~ adjacent sibling selector.

triggerSelector:hover ~ targetSelector {
    display: block;
}

For example, if you want a tooltip to appear when hovering over an adjacent button:

.button:hover ~ .tooltip {
    display: block;
}

answered Nov 6, 2018 at 0:17

brandonscript

73.7k35 gold badges178 silver badges240 bronze badges

Comments

NovaDev · Accepted Answer · 2025-02-11 18:49:51Z

0

Per this post, you can use the container of the two elements to achieve this.

        .container:has(.row3:hover) .row {
            background-color: blue;
            }

<div class="container">
<div class="rows">
    <div class="row">1</div>
    <div class="row">2</div>
</div>

<div class="row3">hover here, the other two rows will turn blue</div>
</div>

}

answered Feb 11 at 18:49

NovaDev

2,9715 gold badges33 silver badges53 bronze badges

Collectives™ on Stack Overflow

How to change one element while hovering over another with CSS

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related