Question

When hovering over a div with id="single-main" how could I get the text color of the matching ID’s in the ul with class="contract-list" text to change color?

I have seem many examples of hover and on. However none that pass an ID.

My HTML is:

<div id="single-main" class="clearfix">                    
    <a id="postID" href="http:www.xxxxxx.xx/" title=" "><img width="112" height="150"     src="http:www.xxxxxx.xx/X.jpg" class="some class" alt="" title= "" /></a>
    <a id="postID2" href="http:www.xxxxxx.xx/" title=" "><img width="112" height="150" src="http:www.xxxxxx.xx/X.jpg" class="some class" alt="" title= "" /></a>    
</div>

<ul class="contract-list">
    <li>
        <a  id="postID" href="http://www.xxxxxx.xx/" rel="bookmark" title=" "> ADVERTISING</a>
    </li>
    <li>
        <a  id="postID2" href="http://www.xxxxxx.xx/" rel="bookmark" title=" "> ADVERTISING2</a>
    </li>
</ul>​​​​​​​​​​

Answer 1

You may try this

HTML (Notice id's replaced with classes in ul‘s a tags)

<div id="single-main" class="clearfix">
    <a id="postID" href="http:www.xxxxxx.xx/" title=""><img width="112" height="150" src="http:www.xxxxxx.xx/X.jpg" class="some class" alt="" title= "" /></a>
    <a id="postID2" href="http:www.xxxxxx.xx/" title=""><img width="112" height="150" src="http:www.xxxxxx.xx/X.jpg" class="some class" alt="" title= ""/></a> 
</div>

<ul class="contract-list">
    <li>
        <a  class="postID" href="http://www.xxxxxx.xx/" rel="bookmark" title=" "> ADVERTISING</a>
    </li>
   <li>
       <a  class="postID2" href="http://www.xxxxxx.xx/" rel="bookmark" title=" "> ADVERTISING2</a>
   </li>
</ul>

JS

$(function(){
    $('#single-main a').on('mouseenter', function(){
        $('.'+$(this).attr('id')).css('color', 'red');
    }).on('mouseleave', function(){
        $('.'+$(this).attr('id')).css('color', 'black');
    });
});​

DEMO.