当 hover 在图像上时如何显示文本

Question

一旦我在图像上使用 hover，如何显示这样的文本？ 一些 tumblr 主题也具有相同的功能，所以我想知道您是如何做到的，这是我的意思的一个例子

Answer 1

你可以试试这个

 .container{ width:200px; height:200px; text-align:center; display:flex; justify-content:center; align-items:center; position: relative; }.hide { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } img{ width:200px; height:200px; } img:hover +.hide { display: block; }.hide:hover{ animation: color-change 1s infinite; } @keyframes color-change { 0% { color: orange; } 50% { color: green; } 75% { color: yellow; } 100% { color: lightblue; } }

 <div class="container"> <img src="https://i.imgur.com/W0cq73T.jpg"> <div class="hide">this text will be shown when someone hovers the image</div> </div>

所以基本上你将文本设置为display:none来隐藏文本。 并将其设置为display:block以在有人将其悬停时显示文本，根本不需要 javascript

现在您可以使用animation为文本的颜色设置动画，就像有人将文本悬停在视频中一样

Answer 2

 let test = document.getElementById("test"); test.addEventListener("mouseover", function(event) { // highlight the mouseover target event.target.style.color = "orange"; // reset the color after a short delay setTimeout(function() { event.target.style.color = ""; }, 500); }, false);

 #center { display: flex; justify-content: center; align-items: center; height: 300px; width: 300px; background: url('https://www.iso.org/files/live/sites/isoorg/files/news/News_archive/2017/08/Ref2213/Ref2213.jpg/thumbnails/300x300'); color: #fff }

 <div id="center"> <p>Te<span id="test">ss</span>s</p> </div>