呃哦......

Question

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

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

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

现在编写代码的方式是：

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

我使用javascript和jquery代码，我使用第n个子和变量来查找哪个标题悬停并尝试获取帖子标题ID并传递给数组然后尝试获取该ID在数组中的位置然后通过以nth 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;

// 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"
    });
});                     
            <?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）将鼠标悬停在侧栏上后，您的＆lt; span＆gt;将显式分配一个禁用的样式你的.one：悬停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');
})

希望它会有所帮助。

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

呃哦......

1 个答案: