Connecting hover rules for two separate anchors? <p>The fiddle below displays an image link and a text link for each corresponding page. Each image when hovered over shows the coloured version by using css. The text links simply have a border on the bottom when hovered. </p> <p>I need to make the image coloured when the corresponding text link is hovered, and also the text link to have its border shown when the corresponding image is hovered? How can I link these functions together? </p> <p>see this fiddle <a href="http://jsfiddle.net/rabelais/sLq28jb4/" rel="nofollow">http://jsfiddle.net/rabelais/sLq28jb4/</a></p> <pre><code>#chorus { background: url('../images/work-icons/icon-chorus to size BW.jpg'); height: 85px; left: 30px; position: fixed; top: 78px; width: 113px; display: block; } #chorus:hover { background: url('../images/work-icons/chorus-icon to size.jpg'); border-bottom: none; } #chorus-text-link { left: 180px; position: fixed; top: 111px; } </code></pre>