<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';
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.