При нажатии на radio изменить прозрачность div
Добрый день! Господа, подскажите, пожалуйста с решением вот какой проблемы:
В автоматически генерируемой форме есть несколько инпутов (радио) и над ними div-ы с картинками. По умолчанию в цсс у дивов с картинками задан opacity:0.5 , при нажатии на инпут, картинка над ним должна становиться непрозрачной, т.е. opacity:1 Это я сделал, присвоив не картинке, а самому диву прозрачность. ------------ Вопрос! Как сделать, чтобы при нажатии на другую радио кнопку, например, из группы "Цвет", первый выбранный див (с картинкой) обратно становился прозрачным, как и был. При этом есть ведь несколько дивов, внутри которых группы радио кнопок ( <div class="1">, <div class="2">.... ) - цвет, размер и т.п. Как быть? Заранее спасибо за помощь! Нет id, на checked ориентироваться тоже нельзя..(
$('input').click(function(){
$(this).prev().animate({opacity:'1.0'});
return false;
});
<style>
div.images { opacity:0.5; }
</style>
<form method="POST" action="" class="wpcc_form wpcc_form_2">
<div class="1">
цвет
<label>
<div class="images"><img src="img-1.jpg"></div>
<input type="radio" name="m">
</label>
<label>
<div class="images"><img src="img-2.jpg"></div>
<input type="radio" name="m">
</label>
</div>
<div class="2">
форма
<label>
<div class="images"><img src="1a-img.jpg"></div>
<input type="radio" name="p">
</label>
<label>
<div class="images"><img src="2a-img.jpg"></div>
<input type="radio" name="p">
</label>
<label>
<div class="images"><img src="3a-img.jpg"></div>
<input type="radio" name="p">
</label>
</div>
</div>
|
Globus,
а так ?
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
</head>
<body>
<style>
div.images { opacity:0.5; }
:checked + div.images { opacity:1; }
</style>
<form method="POST" action="" class="wpcc_form wpcc_form_2">
<div class="1">
цвет
<label><input type="radio" name="m" checked="checked">
<div class="images"><img src="img-1.jpg"></div>
</label>
<label> <input type="radio" name="m">
<div class="images"><img src="img-2.jpg"></div>
</label>
</div>
<div class="2">
форма
<label> <input type="radio" name="p">
<div class="images"><img src="1a-img.jpg"></div>
</label>
<label><input type="radio" name="p">
<div class="images"><img src="2a-img.jpg"></div>
</label>
<label><input type="radio" name="p">
<div class="images"><img src="3a-img.jpg"></div>
</label>
</div>
</form>
</body>
</html>
|
было бы здорово, но форма генерируется автоматически и её переписывать нельзя. Может есть ещё какая-то возможность использовать псевдоклассы в исходном варианте кода формы?
|
Ваш вариант работает даже при исходном положении кода, но только, если убрать лейблы
Т.е. не ... <div class="1"> <label><input type="radio" name="m" checked="checked"> <div class="images"><img src="img-1.jpg"></div> </label> .... а просто ... <div class="1"> <input type="radio" name="m" checked="checked"> <div class="images"><img src="img-1.jpg"></div> .... Никак не пойму, чем мешают теги label ??? |
переписал генерирующийся штмл и всё заработало, как у вас, спасибо!
|
| Часовой пояс GMT +3, время: 10:08. |