将鼠标悬停在其他元素

Question

我的帖子下面有一个购物袋图标（.wrap-front-page-shop），我试图让它当你将鼠标悬停在购物袋图标上时，帖子摘录将消失（.front-page-后节选）。我正在尝试用css做这个，我想我已经写了正确的CSS，但它没有用。有没有人看到我的错误，还是有更好的方法来解决这个问题？提前谢谢。

css

.wrap-front-page-shop:not(:hover) .front-page-post-excerpt {
   font-family: 'Crimson Text', serif; 
    font-size: 15px;
    padding: 50px 50px;
        display: block;
  position:absolute;
}
.wrap-front-page-shop:hover .front-page-post-excerpt {
    color: #ffffff;
    visibility: hidden;
    display: block;
  position:absolute;
}

front-page-shop-the-post.php（代码用于购物图标和当您将鼠标悬停在购物图标上时显示的实际购物小部件 - 它可以正常工作）

<div class="wrap-front-page-shop">
        <div class="front-page-shop-image"><img src="http://localhost:8888/wordpress/wp-content/uploads/2017/01/shopping-shopping-bag-icon.png" /></div>
    <div class="shopthepost-widget-front">
<?php if (shortcode_exists('show_shopthepost_widget')) {

    // Get the value of the custom field defined in the editor
    $widgetId = get_post_meta(get_the_ID(), 'shortcode_id', true);

    // Check if a value is set
    if (!empty($widgetId)) {

        $shortcode = '[show_shopthepost_widget id="'.$widgetId.'"]';

    } else {

        // or use a default widget
        $shortcode = '[show_shopthepost_widget id="2379026"]';
    }

    echo do_shortcode($shortcode);
} ?>
    </div>
</div>

当您将鼠标悬停在购物图标上时显示购物小部件的css）

.wrap-front-page-shop:not(:hover) .shopthepost-widget-front {
    background-color: #ffffff;
    visibility: hidden;
    display: block;
  position:absolute;
}
.wrap-front-page-shop:hover .shopthepost-widget-front {
    display: block;
  position:absolute;
        margin-left:-225px;
    bottom:150px;
        background-color: #ffffff;
    padding:30px;
}
.wrap-front-page-shop:hover .stp-control {
background-color: #ffffff !important;
          display:inherit !important;
}
.wrap-front-page-shop {
    display: inline-block;
}
.front-page-shop-image {
    padding-right: 15px;
    padding-bottom: 30px;
}

font-page.php，显示帖子摘录代码

<?php
/*
 * Template Name:
 */

get_header();
get_template_part ('inc/carousel');

$the_query = new WP_Query( [
    'posts_per_page' => 14,
    'paged' => get_query_var('paged', 1)
] );

if ( $the_query->have_posts() ) { ?>
    <div id="ajax">
    <?php
    $i = 0;
    while ( $the_query->have_posts() ) { $the_query->the_post();

        if ( $i % 7 === 0 ) { // Large post: on the first iteration and every 7th post after... ?>
        <article <?php post_class( 'col-sm-12 col-md-12' ); ?>>
            <div class="large-front-container">
<?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?>
                </div>
               <h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
            <div class="front-page-post-info">
            <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part( 'front-shop-the-post' ); ?>
                                 <?php get_template_part( 'share-buttons' ); ?>
                <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
            </div>
            </article>
<?php

        } else { // Small posts ?>
            <article <?php post_class( 'col-sm-6 col-md-4' ); ?>>
                <?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?>
                <h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
 <p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
            <div class="front-page-post-info">
            <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part( 'front-shop-the-post' ); ?>
                                 <?php get_template_part( 'share-buttons' ); ?>
                <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
            </div>
            </article>
            <?php
        }
        $i++;
    }?>
    </div>
    <?php if(get_query_var('paged') < $the_query->max_num_pages) {
    }
}
elseif (!get_query_var('paged') || get_query_var('paged') == '1') {
    
    echo '<p>Sorry, no posts matched your criteria.</p>';
}
wp_reset_postdata();
get_footer();

JS我尝试添加可能的解决方案（不起作用）

var _products = document.getElementById("front-page-shop-image"),
  _hideIfHovered = document.getElementById("front-page-post-excerpt");

for (var i=0, e = _products.children; i < e.length; i++) {
  e[i].onmouseenter = function() {
    _hideIfHovered.style.display = "none"; 
  }
  
  e[i].onmouseleave = function() {
    _hideIfHovered.style.display = "inherit"; 
  }
}