2015-04-26 2 views
0

Я пытаюсь создать выбор продукта css с помощью флажка. Мои коды здесьМожно ли выбрать элемент css parent?

.vfb-checkbox{ 
 
    width:180px; 
 
    height:130px; 
 
background:url('http://i304.photobucket.com/albums/nn181/Amam_Dewan/2932337756_1845773ed4_q_d_zpsea5idhnt.jpg'); 
 
} 
 
/* checkboxes */ 
 

 
.vfb-checkbox label { 
 
\t \t cursor: pointer; 
 
\t  display: block; 
 
\t  position: relative; 
 
    width:100%; 
 
    height:100%; 
 

 
\t } 
 
\t 
 
.vfb-checkbox label:before { 
 
\t  content: ""; 
 
     height:100%; 
 
     width:100%; 
 
\t  position: absolute; 
 
\t  left: 0; 
 
\t } 
 
.vfb-checkbox label:hover{ 
 
    background:rgba(0,0,0,.7) url(http://i304.photobucket.com/albums/nn181/Amam_Dewan/selected_zpsvfoaira0.png)center center no-repeat; 
 
} 
 

 
\t 
 
.vfb-checkbox input[type=checkbox] { 
 
    \t display: none; 
 
\t } 
 
\t 
 
\t 
 
    input[type=checkbox]:checked + label:before { 
 
\t  background: rgba(0,0,0,.4) url('http://i304.photobucket.com/albums/nn181/Amam_Dewan/selected_zpsvfoaira0.png') center center no-repeat; 
 
\t }
<div class="vfb-checkbox"> 
 
    
 
    <label for="check1"> 
 
    <input id="check1" type="checkbox" name="check" value="check1"> 
 
    </label> 
 

 
</div>

При нажатии на изображение оно должно быть проверено, но он не работает. Когда я устанавливаю тег метки, за которым следует тег ввода, он работает, но я хочу точно такую ​​же структуру html.

+0

Невероятно, что повторяющийся вопрос, который я только что обозначил, * не * появляется в списке предложенных вопросов, когда я пытаюсь ввести заголовок этого вопроса на страницу запроса. – BoltClock

ответ

1

В настоящее время родительский селектор в CSS отсутствует.

+0

Можно ли использовать javascript? –

+0

Это было бы очень легко выполнить с помощью jQuery. Проверьте библиотеку jQuery и документацию http://api.jquery.com/ – Arthelon

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