display:block при нажатии на radio

#html #css

Нужно, чтобы при наведении или нажатии на radio

.open2 img {display: none;} менялся на {display: block;}


    

        
        4
    

    

        
    



css

.open2 img {display: none;}

    

Ответы

Ответ 1

пример с js



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

  
  

    
    4
  
  
  

    
  
  





пример с css (mini hack)



.open2 img {display: none;}
.open1 {display: block;}
.open1:hover + .open2 img {display: block;}

  
  

    
    4
  
  
  

    
  
  



Ответ 2

Т.к. CSS, в отличиие от JS, не может подняться вверх под DOM, то возможны два варианта:  


размещать эти блоки рядом и использовать "соседние селекторы":




img {
  display: none;
}
input:hover ~ img {
  display: inline-block;
}

  

    
    4
    
  






использовать :hover не целевого элемента, а его родителя:




.open2 img {
  display: none;
}
.open1:hover + .open2 img {
  display: block;
}

  

    
    4
  
  

    
  







Если всё же интересует вариант с JS:  


активацию радио можно обработать вот так:




document.querySelector('.open1 input').onchange = function() {
  if (this.checked) {
    document.querySelector('.open2 img').style.display = 'block'
  }
}
.open2 img {
  display: none;
}

  

    
    4
  
  

    
  






наведение вот так:




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

  

    
    4
  
  

    
  



Ответ 3

Не выйдет чисто на CSS.
Для получения значения #iphone_4, нужно зайти глубже, чем потомок с картинкой.
В CSS нету селектора выше по древу, так что выше не подняться.