div:hover滑动特效 css如何控制其他div 的样式？

最新推荐文章于 2023-07-17 10:46:51 发布

ckyblack

最新推荐文章于 2023-07-17 10:46:51 发布

阅读量604

点赞数

分类专栏：学习记录用文章标签： html

本文链接：https://blog.csdn.net/ckyblack/article/details/108620321

版权

记录同时被 3 个专栏收录

25 篇文章 0 订阅

订阅专栏

用

24 篇文章 0 订阅

订阅专栏

学习

9 篇文章 0 订阅

订阅专栏

<style>
.gongzhonghao{
    width: 80px;
	height: 80px;
	position: relative;
	top: -85px;
	left: 55px;
	display: none;
}
//当鼠标移动到该div上时，控制其他div的样式
#gzh:hover + #gongzhonghao{
    width: 80px;
	height: 80px;
	position: relative;
	top: -85px;
	left: 55px;
	display: block;
}
</style>
<body>
<a id="gzh">
	<img src="../../public/img/fixed5.png" alt=""> 
	<p>公众号</p>
</a>
<div id="gongzhonghao" class="gongzhonghao">
     <img v-show="true"  src="../../public/img/fixed6.png" alt="微信公众号">
</div>
<body>

样式作用：通过滑动到指定位置，显示被隐藏的公众号二维码。

如下图所示