.block {
border: 10px solid transparent;
}
.block:hover {
border-color: red;
}
{
name: cart,
id : id,
cat: А1B2C5D2
}
.subList {
...
position: absolute;
top: 0;
left: 0;
...
}
.items:last-child {
.subList {
right: 0;
}
}
<a class="on" href="javascript:;">Включить</a>
<a class="off" href="javascript:;">Выключить</a>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, molestiae!
</div>
.text {
display: none;
}
.on {
&.is-active {
color: green;
}
}
.off {
&.is-active {
color: grey;
}
}
$on = $('.on');
$off = $('.off');
$text = $('.text');
active = 'is-active';
$on.click(function() {
$text.fadeIn(300);
$on.addClass(active);
$off.removeClass(active);
})
$off.click(function() {
$text.fadeOut(300);
$on.removeClass(active);
$off.addClass(active);
})