当鼠标悬停在视频上时，如何显示和隐藏视频上的div

问题描述

我正在尝试在WordPress（易于数字下载）网站上制作一系列视频。

我已使网格正常工作，所有视频都已暂停，直到将鼠标移到上方，然后在鼠标移出视频帧时再次暂停。但是我现在的问题是我在div的视频“添加到购物车”中有一段文字，我想知道是否有可能仅当鼠标悬停在该视频上时才出现鼠标移开时再次隐藏。

这是我当前拥有的代码。

主页：

/*
Template Name: Browser
*/
get_header(); ?>
<link rel="stylesheet" href="https://cinematicpack.com/wp-content/themes/digital-download/inc/css/browser.css" type="text/css" media="all">
</link>
    <div id="primary" class="content-area">
        <main id="main" class="site-main">

<?php
require_once ('wp-config.php');
$dbname = 'dbs568281';
$que = "SELECT * FROM `FJuPShMwposts` WHERE `post_title` LIKE '%rust - %' AND `post_type` LIKE 'download'"; //grab rust downloads
// $que = "SELECT * FROM `FJuPShMwposts` WHERE  `post_type` LIKE 'download'"; // grab all downloads
$link = mysqli_connect(DB_HOST,DB_USER,DB_PASSWORD) or die("Unable to Connect");
mysqli_select_db($link,$dbname) or die("Could not open the db '$dbname'");
$result1 = $link->query($que);
$dbdata = array();
$html_grid = '<div class="float-container">';
foreach ($result1 as $row) {
    $string = $row['post_content'];
    $id = $row['ID'];
    $dlbutton = do_shortcode('[purchase_link id="' . $id . '" text="Add to Cart" style="button" color="blue"]');
    $text = explode('://',$string,2) [1];
    $video = 'https://' . substr($text,strpos($text,".mp4")) . '.mp4';
    $poster = 'https://' . substr($text,".mp4")) . '_thumb1.jpg';
    $html_grid.= '<div class="videowidth">
    <div class="productid" id="mouse_over">' . $dlbutton . '</div><video preload="metadata" poster="' . $poster . '" loop onmouseover="this.play()" onmouseout="this.pause();" class="vid"><source src="' . $video . '"></video></div>';
}
$html_grid.= '</div>';
echo $html_grid;
while (have_posts()):
    the_post();
    do_action('digital_download_after_page_content');
endwhile; // End of the loop.

?>

        </main><!-- #main -->
    </div><!-- #primary -->

<?php
get_sidebar();
get_footer();
?>

CSS：

.videowidth{
  
    margin: -3px;
    max-width: 40%;
    min-width:20%;
    position: relative;
    display: inline-block;
  }
  
.productid{
    position: absolute;
    z-index: 1;
    right: 0px !important;
    left: 0px !important;
    margin-bottom: 0px !important;
    bottom: 0px !important;
    top: 0px !important;
    height: 150px !important;
    width: 310px !important;
  }
  
 .vid{
     position: unset; 
     max-width: -webkit-fill-available;
     margin-top: -6px;
 }
.edd-aa-buy-wrapper {
    margin-top: 20px;
    opacity: 0;
    display: none !important;
}

#mouse_over {
  opacity: 0 !important;
}

#mouse_over:hover {
  opacity: 1 !important;
}

图片： How it currently looks

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）