выделите почтовое поле, когда мышь находится над заголовком - PullRequest
Новая
       32

выделите почтовое поле, когда мышь находится над заголовком

0 голосов
/ 27 июня 2011

сначала посмотрите сайт, пожалуйста

Я нахожусь в ситуации, когда у меня есть посты WordPress, отображаемые в полях.Когда вы наводите указатель мыши на любое из этих полей, оно отображает заголовок сообщения, и его цвет rgba изменяется.Это в настоящее время работает, и я доволен этим.

Теперь вы также можете видеть в левой части экрана все заголовки сообщений.

Теперь то, чего я хочу достичь, это когда я буду зависатьНаведите указатель мыши на любой заголовок в левой части, он выделит поле соответствующего сообщения с этим заголовком.Выделение означает, что он будет отображать цвет rgba и заголовок сообщения в поле.

Теперь код был написан так:

Я использовал один цикл, чтобы получить все заголовки сообщения.и отображать в левой части и использовать другой цикл для отображения полей (заголовок сообщения внутри поля изначально скрыт, но он отображается, когда мышь наводит курсор на любые поля.).

Я использовал javascript и jquery code, и я использовалn-й дочерний элемент и переменная, чтобы найти заголовок, который пытался получить идентификатор заголовка записи и передать в массив, а затем попытался получить позицию этого идентификатора в массиве и затем передать n-ному дочернему элементу в качестве переменной.Но это не сработало, когда я наводил курсор на любой заголовок слева, он выделял все поля, потому что я снова использовал цикл для получения идентификатора заголовка в области сценария Java.

Я немного потерян, так что любойподсказка или советы будут большой пользой.Вы можете увидеть действующий сайт на , посмотреть сайт

и весь код на этой конкретной странице: 

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

1 Ответ

1 голос
/ 27 июня 2011

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: правила наведения курсора.

Я бы порекомендовал:

Наличие более четкой структуры для сопоставления названия вашего меню с 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');
})

Надеюсь, это поможет.

...