Как сделать чтобы иконка становилось активной
$('.blocks').on('change', '.btn :checkbox', function() {
let element = this;
$('.btn :checkbox').each(function() {
if (this != element) {
this.checked = false;
}
});
});
.block {
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.4);
box-sizing: border-box;
margin-bottom: 38px;
margin-left: 15px;
padding: 35px 30px 30px;
position: relative;
width: 560px;
}
.title {
color: #242729;
display: inline-block;
font: 19px/1em Verdana, sans-serif;
}
.text {
color: #242729;
display: inline-block;
font: 16px/1.6em Arial, sans-serif;
padding-top: 18px;
text-align: justify;
}
.btn>div {
background: url(https://i.stack.imgur.com/nN7gj.png) -516px -34px no-repeat;
border-radius: 50%;
display: inline-block;
height: 37px;
left: 492px;
position: absolute;
top: 25px;
transition: all 0.4s ease-in;
width: 37px;
-webkit-filter: grayscale(0.9) opacity(0.5);
filter: grayscale(0.9) opacity(0.5);
}
.btn>input {
display: none;
}
.btn>div:hover {
transition: all 0.7s ease-in-out;
-webkit-filter: grayscale(0.1) opacity(0.9);
filter: grayscale(0.1) opacity(0.9);
}
.btn>input:checked+div {
transform: rotate(315deg);
transition: all 1.0s ease-in-out;
-webkit-filter: hue-rotate(128deg);
filter: hue-rotate(128deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blocks">
<div class="block">
<div class="title">Кнопки которые активируют функции?</div>
<label class="btn"><input type="checkbox"><div></div></label>
<div class="text">Функции можно активировать кнопками мыши или клавиатуры, нажав их в нужном сочетании. Также, незастёгнутые кнопки на куртке могут деактивировать жизненные функции. А вот кнопка, положеная на стул, может активировать так, что функционировать будет
часа два-три.</div>
</div>
<div class="block">
<div class="title">Как реализовать это на jquery</div>
<label class="btn"><input type="checkbox"><div></div></label>
<div class="text">JQuery нужно использовать там, где это действительно необходимо. Но, раз надо, так надо...</div>
</div>
<div class="block">
<div class="title">Lorem Ipsum</div>
<label class="btn"><input type="checkbox"><div></div></label>
<div class="text">это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</div>
</div>
</div>
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Имеется <div class="needsToMove"> на страницеЧерез js добавили метод
Нужно сделать чтобы пользователь на сайте мог вводить данные в БДСоздал вот такую таблицу: С библиотекой jQuery сделал ввод данных в таблицу,...