see the site first, please

I'm in situation where I have wordpress posts showing in boxes. When you hover your mouse on any of these boxes it will display the title of the post and its rgba color gets change. Thats currently working and I'm happy with that.

Now you can also see in left side it display all the post titles.

Now What I want to achieve is, when I will hover mouse on any title in left side, it will highlight the box of the particular post of that title. Highlighting means it will display the rgba color and title of the post in the box.

Now the way the code was written is:

I used one loop to pull all the title of the post and display in left side and use another loop to display boxes (the post title inside the box is hidden initially, but it display when mouse hovers on any boxes.).

I used javascript and jquery code and I used nth child and variable to find which title was hovered and tried to get the post title ID and pass to array and then tried to get the position of that ID inside the array and then pass to nth child as a variable. But it did nt work, when I hover on any title in left side it hightlights all boxes, because I again used loop to get the title ID inside the java script area.

I'm kinda lost, so any clue or tips will be a great favour. you can see the live site on see the site

and the whole code in that particular page is:

<div id="sidebar-documentary">
    <ul id="sidebardocumentary-heading">
        <li><a href="#">Documentaries Showreel 2011</a></li>
    </ul>

    <ul id="sidebardocumentary-title">                      
    <?php query_posts('showposts=-1&cat=4'); $i = 1;?>

<?php if (have_posts()) : ?><?php while (have_posts()) : the_post(); ?>
                                                   <li>
<a href="<?php the_permalink() ?>" title="Permanent Link to <?php the_ID(); ?>" >
<?php the_title(); ?></a></li>                                      

            <?php endwhile;?>

    <?php else : ?><h1>Uh oh...</h1> 
    <?php endif; ?> 
    <?php wp_reset_query(); ?>

    </ul>


    <ul id="sidebardocumentary-archive">
        <li><a href="#">Archive</a></li>
    </ul>
</div>


 <div id="documentary-content"> 

<?php query_posts('showposts=-1&cat=4');  ?>
<?php if (have_posts()) : ?>
        <?php while (have_posts()) : the_post(); ?>

<div class="one">       
<a href="#"><img src="<?php bloginfo('template_url'); ?>/images/featured-image.jpg"/></a>


 <span class="details">


<div class="hover-content">


<a href="<?php the_permalink() ?>"><?php the_title();?></a>

Uh oh...

</div> <!-- End documentary-content-->  

 // here is javascript code

<?php query_posts('showposts=-1&cat=4'); $i = 1;?>
<?php if (have_posts()) : ?><?php while (have_posts()) : the_post(); ?>         

$j("#sidebardocumentary-title li a").mouseover(

    function () {

    <?php $key=0;
    $postvalue[$a]=get_the_ID(); 
    $i= $postvalue[$a];
    $key= array_search($i, $postvalue);
    ?>;

    var x = <?php echo $key; ?>;
    x=x+1;

// document.write(x);

 $j(this).stop().animate({backgroundColor:"#000000", color:"#FFFFFF"}, 0);  

$j("#documentary-content .one:nth-child("+x+") .details").css({

    "background-color": "rgba(65, 65, 65, 0.8)",
    "width":"230px",
                                    "height":"125px",
                                     "margin-top":"-134px",

                                    "overflow": "hidden",    
                                    "position": "relative",  
                                    "display": "block"          
                            });     

                    })
$j("#sidebardocumentary-title li a").mouseout(
                    function () {

                        $j(this).stop().animate({backgroundColor:"#FFFFFF", color:"#999999"}, 50);

    $j("#documentary-content .one:nth-child(n) .details").css({
        "display": "none"
    });
});                     
 开发者_JAVA百科           <?php $a++; ?>
        <?php endwhile; ?>
<?php else : ?><h1>Uh oh...</h1>

1) I think your sourcecode will produce something like:

$j("#sidebardocumentary-title li a").mouseover( ... var x = 1;
...
$j("#sidebardocumentary-title li a").mouseover( ... var x = 5;
$j("#sidebardocumentary-title li a").mouseover( ... var x = 6;

It will result in:
Hovering on any side bar title, will trigger all these mouseover functions.

2) After hovering on the side bar, your <span> will be explicitly assigned with a style, which disables your .one:hover css rules.

I would recommend:

Having a clearer structure to map from your menu title to img.

For instance, you can do something like:

<div id="sidebar-documentary"> 
    ...
    <a href="#" id='img_detail_1'>Documentaries Showreel 2011</a>


...
<div id="documentary-content">
    ...
    <span class="details" id='img_detail_1'>
    ...

And js code:

$j("#sidebardocumentary-title li a").mouseover(function(){
    var id = $j(this).attr('id');

    $j(this).stop().animate({backgroundColor:"#000000", color:"#FFFFFF"}, 0);       
    $j("#"+id).css({
            "background-color": "rgba(65, 65, 65, 0.8)",
            "width":"230px",
            "height":"125px",
             "margin-top":"-134px",
            "overflow": "hidden",    
            "position": "relative",  
            "display": "block"          
    });
}).mouseout(function(){
    $j(this).stop().animate({backgroundColor:"#FFFFFF", color:"#999999"}, 50);
    $j("#documentary-content .one .details").attr('style', 'display:none');
})

Hope it would help.