博客文章悬停：不允许用户将鼠标悬停在具有特定 ID 的文章上答案

【问题标题】：Blog post hovers: Not letting the user hover over posts with specific IDs博客文章悬停：不允许用户将鼠标悬停在具有特定 ID 的文章上
【发布时间】：2014-09-14 00:16:54
【问题描述】：

我设置了articles（博客文章），以便用户可以将鼠标悬停在它们上方以显示标题。但是，对于具有 post-0 类的文章，我希望只显示标题，而不需要用户将鼠标悬停在它们上面。

在研究了 jQuery 的选择器后，似乎需要使用 .not 选择器，但我完全不知道如何在代码中实现它。下面是我正在使用的脚本。谁能告诉我实现这一目标的方法？

所以我想实现类似$( "article" ).not( ".post-0" );

这是小提琴：http://jsfiddle.net/dz30ov2a/

基本上，我不希望“即将推出”框“可悬停”。

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>

【问题讨论】：

同时发布您的 HTML。还有一把小提琴。
@j08691 完成并完成。
像这样jsfiddle.net/j08691/6g1qd4Lb?
@j08691 是的，就这样。谢谢。

标签： javascript jquery hover mouseenter mouseleave

【解决方案1】：

如果是静态的，我认为你应该删除与 Javascript 的交互。

添加一个 CSS 规则，“.post-0”无需悬停即可显示
$(document).on("mouseenter mouseleave", "article:not(.post-0)", function(){....})
以自我解释的方式编写代码，通过添加一个新类“static-article”并执行“article:not(.static-article)”将使其更易于阅读。

【讨论】：

【解决方案2】：

变化：

$this = $(this),

到：

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

似乎可以修复它。

jsFiddle example

【讨论】：