html - 如何在图像图标处设置鼠标效果
问题描述
我正在尝试在此链接的发现字段中执行与此联系我们按钮相同的鼠标效果。但我不能做同样的系统,标题不能在按钮的右侧对齐。谁能帮我做与 list 一样的Discover部分?[link][1]
<div>
<a href="#">
<figure> <img src="http://demo.mofizagrofood.com/wp-content/uploads/2018/11/ph2.png" alt="image"> </figure>
</a>
<h2>
Contact Us
</h2>
</div>
figure{
display:block;
width:80px;
height: 80px;
border-radius: 50px;
font-size: 40px;
text-align: center;
margin-right: 10px;
background: #fff;
line-height: 1.7em;
}
figure img{
display:inline-block;
width: 60px;
height: auto;
}
演示链接
解决方案
'transform: translateY' 使图像上下滑动。父级上的'display: flex' 使其子级从左到右对齐。尝试这个。 https://codepen.io/hridoy569/pen/WYPXNj
<div class="box">
<a href="#" >
<figure>
<img class="img1" src="" alt="image1">
<img class="img2" src="" alt="image2">
</figure>
</a>
<h2> Contact Us </h2>
</div>
body{
background: White;
}
.box{
width: 350px;
height: 80px;
background: #f5f5f5;
display: flex;
overflow: hidden;
}
.box h2{
}
figure{
width:80px;
height: 80px;
border-radius: 50px;
font-size: 20px;
text-align: center;
margin: 0 10px 0 10px;
background: #ccc;
}
figure img{
width: 80px;
height: 80px;
}
.box:hover .img1{
transform: translateY(-100%);
transition: transform 0.6s ease;
}
.box:not( :hover ) .img1{
transform: translateY(0%);
transition: transform 0.6s ease;
}
.box:hover .img2{
transform: translateY(-100%);
transition: transform 0.6s ease;
}
.box:not( :hover ) .img2{
transform: translateY(0%);
transition: transform 0.6s ease;
}
推荐阅读
- javascript - Observable 在发出错误后继续发出事件
- sql - MSSQL 按条件过滤结果
- python - 在多对多关系上在 django orm 中执行 GROUP BY HAVING?
- generics - Kotlin 使用多泛型类型的 out 关键字
- mysql - Mysql GRANT 语句格式化
- python - 如何在迭代时逐行编辑数据框?
- image - Theme 在启动时导入图像文件中的所有图像,并通过 netbeans 减慢项目的运行速度。如何避免?
- javascript - 如何仅从 discord.js v12 中的 message.guild.members.fetch() 获取 UserID?
- sql - BigQuery 中使用标准 SQL 的列中的分层随机样本
- r - 在工作目录中找不到新创建的函数