Показать изображение при наведении курсора на диапазон

Мне было интересно, как показать изображение, когда вы нависаете над <span>.Показать изображение при наведении курсора на диапазон

Вот мой код:

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

Можно ли сделать это только с помощью CSS?

источник

2015-11-15 ALEX

Вы не можете, так как это не является прямым родственным, вы его завернутым ему H1, которая на самом деле будет то, что нужно событию парения называться далее. – Ohgodwhy

Возможный дубликат [Есть ли предыдущий селектор?] (Http://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-selector) – CY5

Если событие 'click', я могу думать очень хакерского решения css, но не 'hover' – Andrew

Вы можете установить, чтобы охватить выглядел как h1 и сделать что-то вроде этого:

код:

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

источник

2015-11-15 19:11:18 Adrian

CSS не может справиться с этой ситуацией, потому что эти два элемента не являются непосредственными братьями и сестрами. Для этого вам нужно использовать хотя бы Javascript или лучше использовать JQuery.

источник

2015-11-15 18:55:43

Вам нужно немного JS для этого, я сделал это в родной JS, в случае вы используете это, у вас не будет раздувания jQuery.

<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

источник

2015-11-15 19:37:35

Показать изображение при наведении курсора на диапазон

ответ

Смежные вопросы