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>
게시하여 HTML은. 그리고 바이올린. – j08691
@ j08691 완료 및 완료되었습니다. – J82
이렇게 http://jsfiddle.net/j08691/6g1qd4Lb/? – j08691