Title: Target a different div on hover?
Tags: css;css-selectors
Question: I need to know whether it is possible to target a different element within a selector, eg: 'when I hover over this element, change this OTHER element'; something like:

```#gallery li:hover {
   h2 {display:block}
}
```

So in the above example I'm trying to say that when I hover over the #gallery div, the h2 element will display as block.

CodePen: http://codepen.io/sad_muso/pen/JKdBox

Many thanks for your help

Comment: Obvious duplicate of http://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered, which could have been found by googling for "css hover target other element".

Comment: This seems like more of a javascript solution. Im not sure if its possible in css but I can definitely provide a solution in jquery.

Comment: Not unless the element in question is nested within the element hovered over, or is the next direct sibling (using the `+` selector). Otherwise, explore javascript solutions.

Comment: It depends on where that elements is present in your markup.

Comment: To give a sensible answer we really need to see your HTML, please look at the "*[mcve]*" guidelines.


Here is another answer: See the css written by you is not valid as in side ```{}``` you can use css property but you cannot define any other element.

But yes there are some selector's in css like ```+```, ```~```.

Suppose the html is like this

```<ul&gt;
  <li&gt;
    <h2&gt;...</h2&gt;
  </li&gt;
</ul&gt;
```

Then on hover of li you can do something in ```h2``` by applying css for child div like this.

```li:hover h2{
  color:red;
}
```

```
  A simple space defines that ```h2``` is child element of ```<li&gt;```.
```

Suppose html is like this

```<ul&gt;
  <li&gt;...</li&gt;
  <h2&gt;...</h2&gt;
</ul&gt;
```

Then you can use this css to do something on ```h2``` on ```li``` hover

```li:hover + h2{
  color:red;
}
```

```
  ```+``` defines that ```h2``` is placed next to ```li```
```

These are some examples of using css for appyling something on different element.

But if this doesn't meets you requirement then the only solution is to use jquery. In jquery it doesn't matter where are the elements written you can simply do like this

```$('li').hover(function(){
  $('h2').css('color','red');
});
```

```
  In above answer i am using ```<h2&gt;``` as a child of ```<ul&gt;``` just to give you example on the css rules but for valid html you can't use ```<h2&gt;``` as a direct child of ```<ul&gt;```.
```

Comment for this answer: I understand that you're just giving an example here, but you should probably specify that you cannot put `h2` as a direct child of `ul`.

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 2, 'CommentCount': 5, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2016:00:06/02/16', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<css><css-selectors>', 'Title': 'Target a different div on hover?', 'ViewCount': 2101, 'id': 37588989, 'user_AboutMe': '', 'user_AccountId': 6484270.0, 'user_DisplayName': 'sad muso', 'user_Reputation': 91.0, 'user_Views': 27.0, 'user_id': 5020359.0}}