 <p>You can do this with the CSS sibling selector <code>~</code>, with the caveat that your hover element must come before the elements you want to style in the markup. You can display them in any order you like, though.</p> <p><strong>Demo:</strong> <sub><sub><sub><a href="http://jsfiddle.net/ThinkingStiff/a3y52/" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NI3c4.png" alt="jsFiddle"></a></sub></sub></sub></p> <h3>CSS:</h3> <pre class="lang-css prettyprint-override"><code>#one:hover ~ #three, #six:hover ~ #four { background-color: black; color: white; } #four { margin-left: -35px; } #six { left: 80px; position: relative; } .box { cursor: pointer; display: inline-block; height: 30px; line-height: 30px; margin: 5px; outline: 1px solid black; text-align: center; width: 30px; } </code></pre> <h3>HTML:</h3> <pre class="lang-html prettyprint-override"><code>&lt;p&gt;Hover over 1 and 3 gets styled.&lt;/p&gt; &lt;div id="one" class="box"&gt;1&lt;/div&gt;&lt;!-- --&gt;&lt;div id="two" class="box"&gt;2&lt;/div&gt;&lt;!-- --&gt;&lt;div id="three" class="box"&gt;3&lt;/div&gt; &lt;!-- this works because 4 is after 6 in the markup, despite its display position --&gt; &lt;p&gt;Hover over 6 and 4 gets styled.&lt;/p&gt; &lt;div id="six" class="box"&gt;6&lt;/div&gt;&lt;!-- --&gt;&lt;div id="four" class="box"&gt;4&lt;/div&gt;&lt;!-- --&gt;&lt;div id="five" class="box"&gt;5&lt;/div&gt; </code></pre>