2014-09-14 4 views
0

У меня есть articles (записи в блоге), чтобы пользователь мог нависнуть над ними, чтобы открыть заголовки. Тем не менее, для статей с классом post-0 я бы хотел, чтобы заголовки отображались просто без необходимости наводиться на них.Сообщение в блоге: не позволяет пользователю наводиться на сообщения с конкретными идентификаторами

После изучения селекторов jQuery, похоже, что нужно использовать селектор .not, но я совершенно не понимаю, как его реализовать в коде. Ниже приведен сценарий, который я использую. Может ли кто-нибудь показать мне способ добиться этого?

Так что я хотел бы реализовать что-то вроде $("article").not(".post-0");

Вот скрипку: http://jsfiddle.net/dz30ov2a/

В принципе, я не хочу, чтобы «в ближайшее время» окно, чтобы быть «hoverable».

JavaScript

$(document).on("mouseenter mouseleave", "article", function(e) { 

     // mouseenter variable returns true if mouseenter event is occurring 
     // and it returns false if event is anything but mouseenter. 
    var mouseenter = e.type === "mouseenter", 
     $this = $(this), 
     img = $this.children('img'), 
     postInfo = $this.children('.post-info'); 

     // Both of these use ternary if statements that are equal to: 
     // if (mouseenter) { var imgFade = 0.4; } else { var imgFade = 1; } 
     // if (mouseenter) { var postInfoFade = 'fadeIn'; } else { var postInfoFade = 'fadeOut'; } 
    var imgFade = mouseenter ? 0.4 : 1, 
     postInfoFade = mouseenter ? 'fadeIn' : 'fadeOut'; 

    img.stop().fadeTo(500, imgFade); 
    postInfo.stop()[ postInfoFade ](500); 

}); 

HTML

<div id="article-list"> 
    <article id="post-1" class="post-1 post type-post status-publish format-standard has-post-thumbnail hentry category-uncategorized"> 
     <div class="post-info"> 
      <h1 class="entry-title"><a href="post-1/" rel="bookmark">Post 1</a></h1> 
      <span class="posted-on"> 
       <a href="post-1/" rel="bookmark"> 
        <time class="entry-date published" datetime="2014-08-14T13:02:27+00:00">August 14, 2014</time> 
        <time class="updated" datetime="2014-09-05T02:20:16+00:00">September 5, 2014</time> 
       </a> 
      </span> 
     </div> 
     <img width="312" height="200" src="http://i.imgur.com/DYsiQ1a.jpg" class="attachment-post-thumbnail wp-post-image" alt="post-1" style="opacity: 0.4;"> 
    </article><!-- #post-## -->        
    <article id="post-0" class="post-0 post type-post status-publish format-standard hentry"> 
     <div class="post-info"> 
      <h1 class="entry-title"><a href="" rel="bookmark">Coming Soon</a></h1> 
      <span class="posted-on"> 
       <a href="" rel="bookmark"> 
        <time class="entry-date published" datetime="2014-08-14T13:02:27+00:00">August 14, 2014</time> 
        <time class="updated" datetime="2014-09-05T02:20:16+00:00">September 5, 2014</time> 
       </a> 
      </span> 
     </div> 
     <img src="http://i.imgur.com/8rca7SA.gif" alt="Coming soon" style="opacity: 1;">  
    </article><!-- #post-## --> 
</div> 
+0

разместим ваш HTML, а также. И скрипка. – j08691

+0

@ j08691 Готово и сделано. – J82

+1

Так вот так http://jsfiddle.net/j08691/6g1qd4Lb/? – j08691

ответ

0

То, что я думаю, вы должны удалить это взаимодействие с JavaScript, если он статичен.

  1. добавить правило CSS, что».post-0" будет видна без необходимости парения
  2. $ (документ) .on ("MouseEnter MouseLeave", "статья: нет (.post-0)", function() {....})
  3. Напишите код самостоятельно, добавив новый класс «static-article» и сделайте «article: not (.static-article)», что упростит чтение.
0

Изменение:

$this = $(this), 

к:

$this = $(this).not('.post-0'), 

кажется, чтобы исправить это.

jsFiddle example