如何解决当鼠标悬停在视频上时,如何显示和隐藏视频上的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;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。