【如何在悬停CSS上显示博客特色图片()】我几乎已经完成了网站的第一个自定义主题。我创建了一些自定义帖子类型来管理投资组合和工作人员部分。代码没有问题, 但是客户端询问当用户将鼠标悬停在其上时是否可以更改人员图像。有什么办法可以在wordpress中做到这一点?
这是我的代码示例
<
div class="team-boxed">
<
?php
$args = array(
'post_type' =>
'team'
);
$team = new WP_Query($args);
?>
<
div class="intro">
<
h2 class="text-center text-uppercase" id="">
Team<
/h2>
<
/div>
<
div class="row people">
<
?php if( $team->
have_posts() ): while( $team->
have_posts() ): $team->
the_post();
?>
<
div class="col-md-6 col-lg-4 item">
<
div class="box">
<
div class="rounded-circle" style="background-image:url('<
?php the_post_thumbnail_url('full');
?>
')" id="staff-pic">
<
/div>
<
h3 class="team-name">
<
?php the_title();
?>
<
/h3>
<
p class="description text-center">
<
?php echo get_the_content();
?>
<
/p>
<
div class="social">
<
a href="http://www.srcmini.com/#">
<
i class="fab fa-facebook">
<
/i>
<
/a>
<
a href="http://www.srcmini.com/#">
<
i class="fab fa-twitter">
<
/i>
<
/a>
<
a href="http://www.srcmini.com/#">
<
i class="fab fa-instagram">
<
/i>
<
/a>
<
/div>
<
/div>
<
/div>
<
?php endwhile;
?>
<
?php endif;
wp_reset_postdata();
?>
<
/div>
<
/div>
#1最简单的方法是像这样输出。例如, 如果你在自定义元数据中存储了ALT图像, 则可以将其用作第二图像。
<
img src="http://www.srcmini.com/FIRST IMAGE" onmouseover="this.src='http://www.srcmini.com/SECOND IMAGE'" onmouseout="this.src='http://www.srcmini.com/FIRST IMAGE'" />
其他选项包括输出一些其他CSS或JS。但是你也可以使用具有数据属性的通用JS, 也许可以通过更多选项, 动画等来处理它。
推荐阅读
- 如何显示wordpress主题中的继续阅读摘要()
- 如何在WordPress中以编程方式设置主题()
- Linux写时复制(CopyOnWrite)|写时拷贝|rcu
- 论文阅读丨神经清洁(神经网络中的后门攻击识别与缓解)
- shellLinux 连续执行多条命令的方法和区别
- Redis安装大全涵盖Windows Linux Docker
- RDMAmellonx流控配置工具mlnx_qos
- 浅谈语音质量保障(如何测试 RTC 中的音频质量())
- linuxcentOS7配置网口IP|RDMA配置IP|ensenoenp网口的区别