1

I was wondering how to show an image when you're hovering over a <span>.

Here's my code: 

<html>
    <head>
        <style>
            .img { display: none; }
            .show:hover + .img { display: block; }
        <style>
    </head>
    <body>
    <h1>Hello there how are you <span class="show">guys</span></h1>
    <img src="/image.jpg" class="img">
    </body>
</html>

Is it possible to do so with just css?

ALEX
  • 64
  • 1
  • 6
  • 1
    You can't, as it's not a direct sibling, you have it wrapped it an H1, which is actually going to be what the hover event needs to be called on. – Ohgodwhy Nov 15 '15 at 18:47
  • Possible duplicate of [Is there a previous sibling selector?](http://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-selector) – CY5 Nov 15 '15 at 18:57
  • If the event is `click`, I can think of a very hacky css solution, but not `hover` – Andrew Nov 15 '15 at 18:59

3 Answers3

1

CSS can't handle this situation because these two elements are not direct siblings. To achieve this, you need to use at least Javascript, or better using JQuery.

Raphaël Vigée
  • 2,048
  • 14
  • 27
1

You can set to span looked like h1 and do something like this:

code: 

<html>
    <head>
        <style>
            .img { display: none; }
            .show:hover + .img { display: block; }
        <style>
    </head>
    <body>
    <h1>Hello there how are you</h1><span class="show">guys</span>
    <img src="/image.jpg" class="img">
    </body>
</html>
Adrian
  • 532
  • 1
  • 7
  • 16
0

You will need a little bit JS for this, i did it in native JS, in case you use this, you will not have the jQuery bloat.

<h1>Hello there how are you <span id="pic1">guys</span></h1>
<div id="pic2"><img     src="http:
//news.images.itv.com/image/file/519020/stream_img.jpg"
width:300 height=200></div>

http://codepen.io/damianocel/pen/gaqPQY

damiano celent
  • 721
  • 6
  • 12