Question

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

在研究jQuery的选择器之后，看起来需要使用.not选择器，但我对如何在代码中实现它感到困惑。下面是我正在使用的脚本。有人能告诉我一个实现这个目标的方法吗？

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

这样的东西

基本上，我不希望“即将推出”的盒子是“可以”的。“

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

Answer 1

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

添加一条CSS规则，“。post-0”将无需悬停
$（document）.on（“mouseenter mouseleave”，“article：not（.post-0）”，function（）{....}）
以自我解释的方式编写代码，通过添加新类“静态文章”并执行“article：not（.static-article）”将使其更易于阅读。

Answer 2

更改：

$this = $(this),

为：

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

似乎解决了这个问题。

<强> jsFiddle example

博客帖子悬停：不允许用户将鼠标悬停在具有特定ID的帖子上

2 个答案: