It is necessary that when you hover or click on the radio

.open2 img {display: none;} changed to {display: block;}

 <div id='apple_iphone' class='gadget_open'> <div class='open1'> <input type='radio' id='iphone_4' name='iphone_model' value='4'> <label for='iphone_4'>4</label> </div> <div class='open2'> <img src='img/iphone.jpg' alt=''> </div> </div>

css

 .open2 img {display: none;}
  • You can do it on css if the image is next to the label or on js - Mr. Black
  • I know what can be done on css, and without js ... but not strong in selectors. There will be something like #apple_iphone label [for = iphone_4]: checked ~ .open2 img {display: block; } - f1amestar
  • Want to write on js? - Mr. Black
  • I want the opposite without using js - f1amestar
  • because css works in cascade, i.e. it passes through selectors deep into, then it is necessary that the processed blocks are neighbors of one guy - lexxl

3 answers 3

js example

 document.querySelector('.open1 input').onmouseenter = function() { document.querySelector('.open2 img').style = 'display: block'; } document.querySelector('.open1 input').onmouseleave = function() { document.querySelector('.open2 img').style = 'display: none'; } 
 .open2 img {display: none;} 
 <div id="apple_iphone" class="gadget_open"> <div class="open1"> <input type="radio" id="iphone_4" name="iphone_model" value="4" /> <label for="iphone_4">4</label> </div> <div class="open2"> <img src="img/iphone.jpg" alt=""> </div> </div>

css example (mini hack)

 .open2 img {display: none;} .open1 {display: block;} .open1:hover + .open2 img {display: block;} 
 <div id="apple_iphone" class="gadget_open"> <div class="open1"> <input type="radio" id="iphone_4" name="iphone_model" value="4" /> <label for="iphone_4">4</label> </div> <div class="open2"> <img src="img/iphone.jpg" alt=""> </div> </div>

  • If only so - Mr. Black
  • This is a hack, as it were, since the verification goes through a neighbor, and not a more nested descendant. - user207618
  • This option is not suitable, because the buttons will be more than one. - f1amestar
  • if it doesn't, please tell me the option on js - f1amestar
  • @ f1amestar, schya ... - Mr. Black

Because Since CSS , unlike JS , cannot go up under the DOM, then two options are possible:

  • place these blocks side by side and use "neighboring selectors":

 img { display: none; } input:hover ~ img { display: inline-block; } 
 <div id='apple_iphone' class='gadget_open'> <div class='open1'> <input type='radio' id='iphone_4' name='iphone_model' value='4'> <label for='iphone_4'>4</label> <img src='img/iphone.jpg' alt=''> </div> </div>

  • use :hover not the target element, but its parent:

 .open2 img { display: none; } .open1:hover + .open2 img { display: block; } 
 <div id='apple_iphone' class='gadget_open'> <div class='open1'> <input type='radio' id='iphone_4' name='iphone_model' value='4'> <label for='iphone_4'>4</label> </div> <div class='open2'> <img src='img/iphone.jpg' alt=''> </div> </div>

If you are still interested in the version with JS:

  • radio activation can be handled like this:

 document.querySelector('.open1 input').onchange = function() { if (this.checked) { document.querySelector('.open2 img').style.display = 'block' } } 
 .open2 img { display: none; } 
 <div id='apple_iphone' class='gadget_open'> <div class='open1'> <input type='radio' id='iphone_4' name='iphone_model' value='4'> <label for='iphone_4'>4</label> </div> <div class='open2'> <img src='img/iphone.jpg' alt=''> </div> </div>

  • pointing like this:

 document.querySelector('.open1 input').onmouseenter = function() { document.querySelector('.open2 img').style.display = 'block' } document.querySelector('.open1 input').onmouseout = function() { document.querySelector('.open2 img').style.display = 'none' } 
 .open2 img { display: none; } 
 <div id='apple_iphone' class='gadget_open'> <div class='open1'> <input type='radio' id='iphone_4' name='iphone_model' value='4'> <label for='iphone_4'>4</label> </div> <div class='open2'> <img src='img/iphone.jpg' alt=''> </div> </div>

  • And how in the 1st version to make so that when changing the check for another input the picture disappeared? - f1amestar
  • in the first Css or Js? - lexxl
  • in js version .... - f1amestar

Will not work purely on CSS .
To get the value of #iphone_4 , you need to go deeper than a descendant with a picture.
In CSS there is no selector выше по древу , so it does not rise higher.