<p>Зараз блок без ефектів при наведенні. Ви ожете їх уввімкнути, тицнувши на пунктик нижче, та подивитися на результат.</p>
<label>
Уввімкнути ефект:
<input type="checkbox" id="field">
<span>transition: all .15s ease-in 0s;</span>
</label>
<div class="wrapper">
<div id="block">
<p>Блок</p>
</div>
</div>
body {
font-family: monospace;
font-size: 18px;
color: #222;
line-height: 1.45;
}
label {
padding: 16px 0;
display: block;
border-bottom: 2px dashed #666;
}
span {
padding: 4px 6px;
background-color: orange;
border-radius: 4px;
}
.wrapper {
background-color: #eee;
padding: 16px;
margin-top: 16px;
border-radius: 4px;
}
#block {
background-color: #666;
padding: 16px;
width: 100px;
text-align: center;
color: #ddd;
border-radius: 4px;
transition: all 0s ease-in 0s;
}
#block:hover {
background-color: #111;
color: red;
}
document.getElementById('field').onchange = function() {
document.getElementById('block').style.transitionDuration = '0.5s';
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.