0

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

sad muso
  • 91
  • 8
  • 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. – Master Yoda Jun 02 '16 at 10:18
  • It depends on where that elements is present in your markup. – Mohammad Usman Jun 02 '16 at 10:20
  • 1
    To give a sensible answer we really need to see your HTML, please look at the "*[mcve]*" guidelines. – David Thomas Jun 02 '16 at 10:28
  • 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. – UncaughtTypeError Jun 02 '16 at 10:41
  • 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". –  Jun 04 '16 at 21:31

2 Answers2

1

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>
  <li>
    <h2>...</h2>
  </li>
</ul>

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>.

Suppose html is like this

<ul>
  <li>...</li>
  <h2>...</h2>
</ul>

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> as a child of <ul> just to give you example on the css rules but for valid html you can't use <h2> as a direct child of <ul>.

Gaurav Aggarwal
  • 9,809
  • 6
  • 36
  • 74
  • 2
    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`. – Chris Jun 02 '16 at 10:27
-1

Not sure if I understand what you need, but I guess you need this: 

#gallery:hover h2{
  display:block
}

Also, note that you can use ID # or class . in css. you are using ID when you have #gallery in your css code, ID's should be unique, each element can have only one ID, while you can have more classes on one page, so if you use .gallery, that would be class.

Also, note that in HTML, to use ID, it should look like this:

<div id="gallery"></div>

and class like this: 

<div class="gallery"></div>

Here is one good link to read more about it: ID vs class

Gaurav Aggarwal
  • 9,809
  • 6
  • 36
  • 74
Goran B
  • 53
  • 7
  • Fantastic, thanks for the feedback everyone. I'll have a play around later on and provide more code to show you what I'm actually trying to achieve :) – sad muso Jun 02 '16 at 11:10
  • Hi all, I've added a CopePen link to my original post now. See how the text appears over the image on hover? I need a way to specifically only target each image, not show them all when I hover. Thanks – sad muso Jun 04 '16 at 21:05
  • *Not sure if I understand what you need* I don't think you do. He wants to select some other element, not a descendant. –  Jun 04 '16 at 21:06