jquery toggle another ID's css when hovering on another element with same id

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>

IDs should be unique ( = only used once in a document ) w3.org/TR/html401/struct/global.html#adef-id — some
– some, Commented Sep 8, 2012 at 1:30
Noted (ID's should be unique)... just the best way I could illustrate..:) — user1656017
– user1656017, Commented Sep 8, 2012 at 2:13

Evan Kennedy · Accepted Answer · 2012-09-08 01:45:22Z

1

Although I strongly disagree with your coding techniques as they are in violation with W3C standards. I will use your HTML to provide a working demo.

http://jsfiddle.net/c3rfq/4/

I used This javascript to look inside each of the div and ul that you defined. In this way, you can add as many images and links as you want following your pattern, but I do highly suggest you use classes instead of ids

$('div#single-main a').hover(function(){
    $('ul.contract-list #'+$(this).attr('id')).css('color','red');
},function(){
    $('ul.contract-list #'+$(this).attr('id')).css('color','');
});

To get a much better standards-based answer I would look at the other answers. I just wanted to show a "working" example with what you have given us.

answered Sep 8, 2012 at 1:45

Evan Kennedy

4,1851 gold badge27 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1656017 Over a year ago

Thanks I see what you mean and I should not use same ID twice :)

The Alpha · Accepted Answer · 2012-09-08 01:47:40Z

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.

Stuart Wakefield · Accepted Answer · 2012-09-08 01:52:39Z

Use the data- attributes...

<div id="single-main" class="clearfix">                    
    <a data-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 data-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>

Then you can use the following script...

$(function(){
    $("#single-main").on("mouseenter", "a", function(){
        $("#"+$(this).data("id")).css("color", "red");
    }).on("mouseleave", "a", function(){
        $("#"+$(this).data("id")).css("color", "");
    });
});

And here's a fiddle http://jsfiddle.net/ZLEQw/

Collectives™ on Stack Overflow

jquery toggle another ID's css when hovering on another element with same id

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related