显示悬停在 wp 中的图像的特色帖子答案

【问题标题】：Display featured post of image being hovered in wp显示悬停在 wp 中的图像的特色帖子
【发布时间】：2021-04-01 14:39:01
【问题描述】：

我正在尝试制作一个仅在您将鼠标悬停在标题上后才显示帖子图片的简单网站。问题是我无法让我的 JS 工作。有了一些以前的技巧，我在这里得到了关于如何做这件事的一些技巧，我首先在 PHP 短代码 sn-p 中列出所有帖子图像，并将它们的 URL 作为 ID（更容易比较）：

// The Query
$the_query = new WP_Query( array( 'post_type' => 'post','posts_per_page' => -1 ) );
// The Loop
if ( $the_query->have_posts() ) {
    echo '<ul>';
    while ( $the_query->have_posts() ) {
        $the_query->the_post();

        //Useless
        // echo '<li>' . get_the_title() . '</li>';
        // echo '<li>' . get_permalink() . '</li>';
    
        echo '<li>';
        echo '<a href="' . get_permalink() . '">';
        echo '<figure class="popUp" id="' . get_permalink() . '">';
        the_post_thumbnail();
        echo '</figure>';
        echo '</a>';
        echo '</li>';
    }
    echo '</ul>';
    /* Restore original Post Data */
    wp_reset_postdata();
} else {
    // no posts found
}

在 CSS 中，我将 PopUp 的显示属性设置为无。到目前为止，一切都按预期进行。但是现在 JS 进来了。我想获取一个悬停的帖子的 URL，如果它与我希望它显示的帖子的 URL（在 CSS 中的 ID）相同。当悬停停止时，我也希望图像消失。

document.getElementById("carousel").addEventListener('mouseover', function(event) {
    var hoveredEl = event.target; // The actual element which was hovered.
    if (hoveredEl.tagName !== 'A') { return; } // Ignore non links
    const addCSS = s =>(d=>{d.head.appendChild(d.createElement("style")).innerHTML=s})(document);
    // Usage: 
    addCSS("#" + hoveredEl + " { display: inline-block; }";)
});

document.getElementById("carousel").addEventListener('mouseout', function(event) {
    var hoveredEl = event.target; // The actual element which was hovered.
    if (hoveredEl.tagName !== 'A') { return; } // Ignore non links
    const addCSS = s =>(d=>{d.head.appendChild(d.createElement("style")).innerHTML=s})(document);
    // Usage: 
    addCSS("#" + hoveredEl + " { display: none; }";)
});

我将它作为简码 JS sn-p 放在与 PHP 代码相同的 DIV 中，但与悬停的链接不同（可能是 iss）。 JS代码中是否有明显的危险信号？

编辑：关闭图形标签并在特定 DIV 上使用事件侦听器。还是没有运气...

【问题讨论】：

我仍在查看您的代码，但只是想指出您没有在任何地方使用</figure> 关闭您的<figure> 标记，因此这可能是个问题。
您是否应该在某个时候关闭<figure> 标签？此外，将 url 设置为 id 是不好的做法……您的 JS 看起来也附加到每个 mouseover 和 mouseout 事件上，这会降低浏览器的速度。最好将事件附加到您要定位的实际对象。
这是对您想做的事情的一个很好的总结吗？在帖子索引页面上，您希望在将鼠标悬停在帖子标题上时显示每个帖子的缩略图。对吗？
@qotsa42 是的，这正是我想要做的。我现在关闭了图形标签。我会尝试将它附加到那个 div thx。

标签： javascript php css wordpress post

【解决方案1】：

尝试这样的事情（注意新的hover-target 类）：

// The Query
$the_query = new WP_Query( array( 'post_type' => 'post','posts_per_page' => -1 ) );
// The Loop
if ( $the_query->have_posts() ) {
    echo '<ul>';
    while ( $the_query->have_posts() ) {
        $the_query->the_post();
    
        echo '<li>';
        echo '<a class='hover-target' href="' . get_permalink() . '">';
        echo '<figure class="popUp" id="' . get_permalink() . '">';
        the_post_thumbnail();
        echo '</figure>';
        echo '</a>';
        echo '</li>';
    }
    echo '</ul>';
    /* Restore original Post Data */
    wp_reset_postdata();
} else {
    // no posts found
}

jQuery('.hover-target').hover(function(e) {
    $(this).siblings('figure').show()
}, function(e){
    $(this).siblings('figure').hide()
})

这假定缩略图默认隐藏，规则如下：

.popUp {
    display: none;
}

之所以有效，是因为您使用 jQuery 的 hover() 传递两个单独的函数，一个用于mouseenter，一个用于mouseleave。在mouseenter 上，显示图像。在mouseleave，隐藏图片。

【讨论】：