极客观点
项目管理
HarmonyOS
做出来的效果和设计图差别好大，有错误，请问怎么修改调整。
这是设计图的效果
这是我做出来的效果，鼠标移上去底部背景色会变，指纹图标也会变。但是鼠标放在图标上面不会变，放在图片和下面才会变。
这是鼠标放在指纹图片上、下面和其他模块显示的效果，同时因为是使用了position: absolute相对定位，背景色设定了高度，它会*2倍的高度，下方多出空白处。
我尝试过图片居中，但是鼠标放在上面也还是不变换，只会显示背景色，删除背景色高度没有空白了，但是背景色也没了。
相关代码
这是HTML部分代码：
<div class="in_nr">
<div class="in_mk">
<a href="javascript:;">
<div class="time">
<div class="time_top">10-12</div>
<p></p>
<div class="time_bom">2019</div>
</div>
<div class="tp"></div>
<div class="tb"></div>
<span>以潜能开发为核心，以品格教育为根基，以兴趣培养为手段，以知识学习为载体，以能力训练为向导。</span>
</a>
</div>
</div>
<div class="in_nr2">
<div class="in_mk">
<a href="javascript:;">
<div class="time">
<div class="time_top">10-12</div>
<p></p>
<div class="time_bom">2019</div>
</div>
<div class="tp"></div>
<div class="tb"></div>
<span>以习惯养成为目标，安特思库成长馆在全国迅速开发结果......</span>
</a>
</div>
</div>
<div class="in_nr3">
<div class="in_mk">
<a href="javascript:;">
<div class="time">
<div class="time_top">10-12</div>
<p></p>
<div class="time_bom">2019</div>
</div>
<div class="tp"></div>
<div class="tb"></div>
<span>以潜能开发为核心，以品格教育为根基，以兴趣培养为手段，以知识学习为载体，以能力训练为向导。</span>
</a>
</div>
</div>
这是CSS部分代码：
.tb { background: url(../tubiao/tubiao.png) no-repeat; }
.in_nr { width: 100%; overflow-x: auto; margin-left: 330px; }
.in_nr a { height: 163px; }
.in_nr a div,span { display: inline-block; }
.in_nr .time { position: absolute; width: 136px; height: 163px; background: #318E76; border-radius: 12px; }
.in_nr .time .time_top { width: 95px; height: 28px; font-size: 30px; font-weight: bold; color: #fff; padding-top: 30px; margin-left: 20px; }
.in_nr .time p { width: 87px; border-bottom: 1px solid #fff; margin-top: 10px; margin-left: 20px; }
.in_nr .time .time_bom { width: 56px; height: 19px; font-size: 20px; font-weight: bold; color: #fff; margin-top: 10px; margin-left: 38px; }
.in_nr .tp { position: absolute; width: 247px; height: 163px; border-radius: 12px; overflow: hidden; background: url(../image/yx1.png); margin-left: 138px; }
.in_nr .tb { position: absolute; width: 78px; height: 100px; background-position: -19px -316px; margin-left: 413px; margin-top: 41px; }
.in_nr span { position: absolute; width: 638px; line-height: 163px; font-size: 14px; font-weight: bold; color: #363636; margin-left: 516px; margin-top: 79px; }
.in_nr .in_mk:hover { width: 1200px; height: 163px; background-color: #FCE9D1; border-radius: 12px; }
.in_nr a:hover .time { background-color: #FCE9D1; }
.in_nr a:hover .time .time_top { color: #F2901A; }
.in_nr a:hover .time p { border-bottom: 1px solid #F2901A; }
.in_nr a:hover .time .time_bom { color: #F2901A; }
.in_nr a:hover .tb { background-position: -19px -530px; }
.in_nr2 { width: 100%; overflow-x: auto; margin-top: 200px; margin-left: 330px; }
.in_nr2 a { height: 163px; }
.in_nr2 a div,span { display: inline-block; }
.in_nr2 .time { position: absolute; width: 136px; height: 163px; background: #318E76; border-radius: 12px; }
.in_nr2 .time .time_top { width: 95px; height: 28px; font-size: 30px; font-weight: bold; color: #fff; padding-top: 30px; margin-left: 20px; }
.in_nr2 .time p { width: 87px; border-bottom: 1px solid #fff; margin-top: 10px; margin-left: 20px; }
.in_nr2 .time .time_bom { width: 56px; height: 19px; font-size: 20px; font-weight: bold; color: #fff; margin-top: 10px; margin-left: 38px; }
.in_nr2 .tp { position: absolute; width: 247px; height: 163px; border-radius: 12px; overflow: hidden; background: url(../image/yx1.png); margin-left: 138px; }
.in_nr2 .tb { position: absolute; width: 78px; height: 100px; background-position: -19px -316px; margin-left: 413px; margin-top: 41px; }
.in_nr2 span { position: absolute; width: 638px; line-height: 163px; font-size: 14px; font-weight: bold; color: #363636; margin-left: 516px; margin-top: 79px; }
.in_nr2 .in_mk:hover { width: 1200px; height: 163px; background-color: #FCE9D1; border-radius: 12px; }
.in_nr2 a:hover .time { background-color: #FCE9D1; }
.in_nr2 a:hover .time .time_top { color: #F2901A; }
.in_nr2 a:hover .time p { border-bottom: 1px solid #F2901A; }
.in_nr2 a:hover .time .time_bom { color: #F2901A; }
.in_nr2 a:hover .tb { background-position: -19px -530px; }
.in_nr3 { width: 1200px; overflow-x: auto; margin-top: 200px; margin-left: 330px; }
.in_nr2 a { height: 163px; }
.in_nr3 a div,span { display: inline-block; }
.in_nr3 .time { position: absolute; width: 136px; height: 163px; background: #318E76; border-radius: 12px; }
.in_nr3 .time .time_top { width: 95px; height: 28px; font-size: 30px; font-weight: bold; color: #fff; padding-top: 30px; margin-left: 20px; }
.in_nr3 .time p { width: 87px; border-bottom: 1px solid #fff; margin-top: 10px; margin-left: 20px; }
.in_nr3 .time .time_bom { width: 56px; height: 19px; font-size: 20px; font-weight: bold; color: #fff; margin-top: 10px; margin-left: 38px; }
.in_nr3 .tp { position: absolute; width: 247px; height: 163px; border-radius: 12px; overflow: hidden; background: url(../image/yx1.png); margin-left: 138px; }
.in_nr3 .tb { position: absolute; width: 78px; height: 100px; background-position: -19px -316px; margin-left: 413px; margin-top: 41px; }
.in_nr3 span { position: absolute; width: 638px; line-height: 163px; font-size: 14px; font-weight: bold; color: #363636; margin-left: 516px; margin-top: 79px; }
.in_nr3 .in_mk:hover { width: 1200px; height: 163px; background-color: #FCE9D1; border-radius: 12px; }
.in_nr3 a:hover .time { background-color: #FCE9D1; }
.in_nr3 a:hover .time .time_top { color: #F2901A; }
.in_nr3 a:hover .time p { border-bottom: 1px solid #F2901A; }
.in_nr3 a:hover .time .time_bom { color: #F2901A; }
.in_nr3 a:hover .tb { background-position: -19px -530px; }
html5
你这个写的真复杂。em....你好像给三块每一块都写了样式？是你写的三种实现方式吗？
我复制到 jsrun 中显示也不对。
我实现了一下，你看效果对不。http://jsrun.net/pB2Kp/edit
初步猜测，你代码白色区域是因为多出了一个 dom 撑开了。
你可以在优化一下你的代码。