-1

Is it possible to modify another element that sits outside a hover selector?

For example:

#first-element img:hover {

}
#second-element {    
  background:url('#');
}

So that you can modify a second element outside a first element upon hovering the first element?

Thanks.

Ben
  • 13,297
  • 4
  • 47
  • 68
nikk wong
  • 8,059
  • 6
  • 51
  • 68
  • Not if we're just talking pure CSS - there is [no parent selector](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) – dsgriffin Jul 03 '14 at 00:53
  • Sorry, I didn't notice it was an img:hover. img does not support child tags, so for your example, no, as null said. – Kai Qing Jul 03 '14 at 00:54

3 Answers3

1

You can use JavaScript to change style properties of other elements with onmouseover and onmouseout atributes:

HTML:

<img src="myimage.jpg" alt="Image to hover" onmouseover="overFunction();" onmouseout="outFunction();"/>

JavaScript:

function overFunction () {
    document.getElementById("second-element").style.backgroundImage="url('1.jpg')";
}
function outFunction () {
    document.getElementById("second-element").style.backgroundImage="url('2.jpg')";
}

Fiddle here: http://jsfiddle.net/Nillervision/H4ubB/

Nillervision
  • 451
  • 2
  • 10
  • I've modified your Fiddle to work with the sole use of html and css. Thought you might be interested in it jsfiddle.net/YuJMm/ – Gust van de Wal Jul 03 '14 at 01:56
  • Yes. But the css only works with sibling elements. The JS solution is the only way for adding hover effect to the image nested in the first div – Nillervision Jul 03 '14 at 07:46
0

What you ask is not possible.

If you change the approach to the problem and the elements directly follow after each other you could do something like:

#first-element:hover + #second-element{} which applies the style to the second element if the first-element is hovered.

Ben
  • 13,297
  • 4
  • 47
  • 68
0

If the element to be affected is a sibling of the hovered element, then its possible:

<a href="">Sometext</a>
<p class="p">Another text</p>
<p class="sp">Another text again</p>

a:hover ~ .sp {
  color: red;
}

DEMO

qtgye
  • 3,580
  • 2
  • 15
  • 30