 <p>Try utilizing <code>css</code> selectors <code>#one:hover, #two:hover, #three:hover</code> , <code>:hover</code> pseudo-class, <code>transition</code> . See also <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity" rel="nofollow">Specificity</a></p> <p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;Testing jQuery&lt;/title&gt; &lt;style type="text/css"&gt; div { width: 400px; height: 300px; margin: 20px; float: left; } #one { background-color: red; } #two { background-color: green; } #three { background-color: blue; } #one:hover, #two:hover, #three:hover { height: 150px; background-color:rgba(0,0,0,0.4); transition: height 1000ms, background-color 1000ms; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="one"&gt;&lt;/div&gt; &lt;div id="two"&gt;&lt;/div&gt; &lt;div id="three"&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</code></pre> </div> </div> </p>