使图像与跨度文本重叠

Question

当rawValue超过hover时，HERE应居中。第二个问题是image文本应该消失（重叠），因为只有HERE应该显示。如何解决这两个问题？

＆＃13;

＆＃13;

image

＆＃13;

.eee span {
	font-weight: 700;
	font-size:2em;
}

.ggg {
 color: yellow;
 background: red;
}

.hhh {
 text-align: center;
 color: #fff;
 background-color: black;
}

.hhh:hover {
 background-color: green;
 background-image: url(http://via.placeholder.com/60x60);
 background-repeat: no-repeat;
 text-align: center;
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用background-position:center将图像居中，color: rgba()隐藏文字

.eee span {
	font-weight: 700;
	font-size:2em;
}

.ggg {
 color: yellow;
 background: red;
}

.hhh {
 text-align: center;
 color: #fff;
 background-color: black;
}

.hhh:hover {
 background-color: green;
 background-image: url(http://via.placeholder.com/60x60);
 background-repeat: no-repeat;
 background-position:center;
 color:rgba(0,0,0,0);
}

<div class="eee"><div class="fff"><span class="ggg">?</span> 
    <span class="hhh">HERE</span>
</div>
</div>

Answer 2

试试这个：

.eee span {
	font-weight: 700;
	font-size:2em;
}

.ggg {
 color: yellow;
 background: red;
}

.hhh {
 text-align: center;
 color: #fff;
 background-color: black;
}

.hhh:hover {
 background-color: green;
 background-image: url(http://via.placeholder.com/60x60);
 text-align: center;
 background-position:center;
 color:rgba(0,0,0,0);
}

<div class="eee"><div class="fff"><span class="ggg">?</span> 
<span class="hhh">HERE</span>
</div>
</div>