jquery - 当鼠标悬停在标题上时突出显示邮箱

Question

see the site first, please

我的情况是我的 wordpress 帖子显示在框中。当您将鼠标悬停在任何这些框上时，它会显示帖子的标题并且其 rgba 颜色会发生变化。这目前正在工作，我对此很满意。

现在您还可以在左侧看到它显示所有帖子标题。

现在我想要实现的是，当我将鼠标悬停在左侧的任何标题上时，它会突出显示该标题的特定帖子的框。突出显示意味着它将在框中显示帖子的 rgba 颜色和标题。

现在代码的写法是:

我使用一个循环来拉取帖子的所有标题并显示在左侧，并使用另一个循环来显示框(框内的帖子标题最初是隐藏的，但当鼠标悬停在任何框上时它会显示。)。

我使用 javascript 和 jquery 代码，我使用第 n 个子项和变量来查找悬停的标题并尝试获取帖子标题 ID 并传递给数组，然后尝试获取该 ID 在数组中的位置然后传递到第 n 个 child 作为变量。但它没有用，当我将鼠标悬停在左侧的任何标题上时，它会突出显示所有框，因为我再次使用循环来获取 java 脚本区域内的标题 ID。

我有点迷路了，所以任何线索或提示都会帮上大忙。你可以在 see the site

那个特定页面的全部代码是:

<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>

呃哦...

</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;

//文档.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"
    });
});                     
            <?php $a++; ?>
        <?php endwhile; ?>
<?php else : ?><h1>Uh oh...</h1>

Answer 1

1) 我认为您的源代码会产生如下内容:

$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;

它将导致:
将鼠标悬停在任何侧边栏标题上，将触发所有这些鼠标悬停功能。

2) 将鼠标悬停在侧边栏上后，您的 将被显式分配一个样式，该样式会禁用你的 .one:hover css 规则。

我会推荐:

具有更清晰的结构，可以将菜单标题映射到 img。

例如，您可以执行以下操作:

<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'>
    ...

以及js代码:

$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');
})

希望对您有所帮助。