2014-09-14 11 views
0

articles (블로그 게시물)을 설정하여 사용자가 제목을 표시하도록 설정할 수 있습니다. 그러나 클래스가 post-0 인 기사의 경우 사용자가 마우스를 가져갈 필요없이 제목 만 표시되도록하고 싶습니다.블로그 게시물을 가리키는 사람 : 특정 ID가있는 게시물을 사용자가 가리 키지 않도록

jQuery의 선택기를 조사한 후 .not 선택기를 사용해야하는 것처럼 보였지만 코드에 구현하는 방법과 관련하여 완전히 혼란 스럽습니다. 아래는 제가 사용하고있는 스크립트입니다. 누구든지 이걸 달성 할 수있는 방법을 보여줄 수 있습니까? http://jsfiddle.net/dz30ov2a/

는 기본적으로, 나는이 '곧'상자가 "hoverable"싶지 않아 : $("article").not(".post-0");

가 여기에 바이올린처럼

그래서 내가 뭔가를 구현하고 싶습니다.

자바 스크립트

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

당신이해야이 정적 인 경우 자바 스크립트와의 상호 작용을 제거 생각 무엇.

  1. 는 CSS 규칙이 ".post-0"것입니다 볼 수 가져가 필요
  2. $ (문서) CSTE 연구진 ("mouseenter하는 MouseLeave"없는 "기사 :하지 (.post-0)"를 추가, function() {....})
  3. "static-article"이라는 새 클래스를 추가하고 "article : not (.static-article)"을 추가하여 코드를 자체 설명 방식으로 작성하면 더 쉽게 읽을 수 있습니다.
0

변경 :

$this = $(this), 

에 :

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

이 문제를 해결할 것으로 보인다. 뿐만 아니라

jsFiddle example